PDA

View Full Version : site wobbly in IE



claire_t
Mar 14th, 2011, 10:25 AM
Hi

I have just redesigned my first site using CSS. It all works fine in Firefox, Chrome, Opera etc but IE isn't keen on it.

The content looks ok but when you move mouse to main content in page it moves up slightly, then moves again when you take mouse off of it. Any ideas how I can solve this?

Site is www.creativebexhill.org

thanks

C

:D

Kor
Mar 14th, 2011, 04:25 PM
I don't see any movement. IE7, 8, 9 /Win7 here.

claire_t
Mar 14th, 2011, 04:26 PM
Ahhhh!!

Have searched all over the internet and can't find a solution! Don't even know what to search for!

Please can someone help! be soooooo grateful! :thumbsup:

C

Kor
Mar 14th, 2011, 04:34 PM
Solution to what? I see no movement onmouseover, so that, at least for me, there is no solution because there is no problem.

teedoff
Mar 14th, 2011, 04:50 PM
There seems to be some padding added when the mouse hovers over the navigation link images. Haven't looked at your code yet, but try adding a global style rule and zero out all margins and paddings.


* {
margin: 0;
padding: 0;
}

claire_t
Mar 15th, 2011, 07:43 PM
Could you please explain what you mean by a global style rule please?

Have tried changing the margin and padding to 0px in various places on the CSS but it does't help. Any other ideas as to stopping this happening in IE? I'm using IE 8 by the way.

my CSS code



#content
{
width: 950px;
font-family: Arial, Helvetica, san-serif;
color: black;
font-size: 12pt;
margin-left: 5px;
margin-right: 5px;
text-align: justify;
padding: 20px;
}
h1 {
color: #0000cc;
font-size: 18pt;
}
h2 {
color: #0000cc;
font-size: 13pt;
}
h3 {
color: #000000;
font-size: 8pt;
}
img.floatleft {
float:left;
display:inline;
margin: 20px;
}
img.floatright {
float:right;
display:inline;
margin: 20px;
}
#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#logo {
width: 50px;
height: 150px;
float: left;
}
#nav {
width: 870px;
float: right;
list-style-type: none;
background-color: white;
}
ul
{
list-style-type:none;
margin:none;
padding:none;
overflow:hidden;
}
li
{
float: left;
padding: 10px;
top-margin: 10px;
}
a:link {color:blue;}
a:visited {color:blue;}
{
display:block;
width:90%;
font-weight:bold;
color:#FFFFFF;
background-color:#FFFFFF;
text-align:center;
padding:10px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FFFFFF;
}
#footer {
width: 200px;
float: left;
font-size: 8pt;
}
#media_menu {
width: 600px;
margin-left: 200px;
margin-right: 200px;
padding:20px;
}
#videos {
width: 950px;
padding: 20px;
}
#info {
width: 900px;
padding: 20px;
height: 420px;
}
#links {
width: 200px;
height: 140px;
float: left;
}
#text {
width: 700px;
height: 140px;
float: right;
}

#text1 {
width: 700px;
height: 150px;
float: right;
}

#info1 {
width: 900px;
padding: 20px;
height: 280px;
}

#info2 {
width: 900px;
padding: 30px;
height: 250px;
}


index page code (but problem in all pages!)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="keywords" content="creative bexhill, creative, bexhill, east sussex, sussex, wellbeing, community interest company, cb cic, rother district, rother, therapeutic, music workshops, non-discriminatory, activities, inclusive"/>
<meta name="description" content="Information on Creative Bexhill, East Sussex"/>
<meta name="author" content="Claire Tregunna, Andrew Voyce"/>
<title>Creative Bexhill-Home</title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="wrapper">

<div id="logo"><a href="index.html"><img src="images/logo1.png" alt="Creative Bexhill Logo" border="0"/></a></div>
<div id="nav">
<ul>
<li><a href="index.html"><img src="images/homer.png" border="0" alt="Home"/></a></li>
<li><a href="about.html"><img src="images/aboutr.png" border="0" alt="About Us"/></a></li>
<li><a href="media.html"><img src="images/mediar.png" border="0" alt="Media"/></a></li>
<li><a href="events.html"><img src="images/eventsr.png" border="0" alt="Events"/></a></li>
<li><a href="links.html"><img src="images/linksr.png" border="0" alt="Links"/></a></li>
<li><a href="contact.html"><img src="images/contactr.png" border="0" alt="Contact"/></a></li>
</ul>
</div>
<div id="content">

<div align="center"><img src="images/logo big.png" alt="Creative Bexhill Logo"/></div>
<br/>
<div align="center">A community interest company
<p/>
Supporting your wellbeing in East Sussex</div>
</div>

<hr width="100%" size="5" align="center" color="#0100c4"/>
<div align="center"><b>Community Interest Company Number: 7333230</b></div>
<p/>
<div id="footer">Website designed by <a href="mailto:[email protected]">CT-Designs</a> 2011</div>
</div>

</body>
</html>




Thanks

C

SB65
Mar 15th, 2011, 07:53 PM
Ok for me in IE7, not in IE8. Try adding:


#nav a{display:block}

to your css.

claire_t
Mar 15th, 2011, 08:27 PM
Ok that seems to work....I think! my pc having internet issues ha!!

will upload and see what happens!

Thanks very much!

C

claire_t
Mar 16th, 2011, 10:58 PM
Certainly has worked yay!!

what does the bot of code do tho? as am learning css and html at the mo would be fab to know what it is there to do!

Thanks

C