-
CSS Help
I have the following page and css file:
http://www.aeroenergy.com/newdesign/menu2.php
http://www.aeroenergy.com/newdesign/ss.css
Something is screwed up and I can't figure it out. In IE, there is a small white gap between the burner image on the left and the menu. In Opera, there is no gap. Also, if you open it in Opera, you can clearly see that the div containing the logo on the right is the width of the screen... IE shows it too, but hides the red border behind the image on the left.
How do I make the div on the right stay to left edge of the image on the left and be the rest of the width of the screen? Also... how do I get rid of that annoying gap in IE?
-
1 Attachment(s)
Hi,
I think its the html section where you've tabbed and newlined... which is weird, but now appears to work on ie5 at work (here).
Attached is a zip file so you can test, I changed some of the css/html a little, but you should be able to see now.
Vince
-
Hi Ober, you´re css was an absolute mess. Try to use shorthands wherever possible.
I´ve fixed your gap problem, IE sucks, also I´ve converted your code to xhtml, and have cleaned up the css a little.
The code below now displays the same in IE6, Firefox 0.9 and Opera 7
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Aero</title>
<style media="screen" type="text/css">
body{
margin: 0;
padding: 0;
}
#container {
padding: 0;
margin: 0;
border-top: 25px solid black;
border-bottom: 2px solid black;
margin-bottom: 10px; /* remove this if you need the menu */
}
#headerpic {
border: 1px dashed lime;
float: left;
}
#headerpic img{
width: 176px;
height: 128px;
vertical-align: bottom; /* fixes the IE gap bug */
}
#headerlogo {
margin-top: 10px; /* relative positioning is buggy */
border: 1px dashed red;
text-align: center;
}
#headerlogo img{
width: 264px;
height: 110px;
}
.floathack{clear: both;}
</style>
</head>
<body>
<div id="container">
<div id="headerpic">
<img src="images/pflame.gif" />
</div>
<div id="headerlogo">
<img src="images/aerosignsmall.gif" />
</div>
<div class="floathack"><!-- float hack --></div>
</div>
Nav here
</body>
</html>
I hope this is what you meant. Also take note of the float hack I´ve used, this is so that the container extends till the end of the floats. Have fun with it.
Oh and also, use classes if you have more than one instance of that specific item, otherwise use id´s (i´ve changed that for you)
-
Thanks to everyone for the help. I haven't tried any of what you guys posted yet (been busy) but I will soon.
I'm getting better at CSS (you should have seen my old stuff!), but I know I still have a lot to learn.
Why did you set a "media" attribute in the css? And would be is it better to put all your IDs in your internal style sheet... because I've just been putting all my ids and classes in my external style sheets.
-
First of all I didn't mean to put you down, I'm very glad that more and more people are learning CSS so please keep on going, you'll learn it fast.
Actually external are better for most of the cases (since you can use it for more pages than one, and your html is easier to maintain), I just used it inline here so that it was easier for me to test and post.
Also I've set the media attribute out of habit, because I normally provide a print stylesheet too.
Please note that I made the floathack a class may you need it more than once (like it is now, it might as well be an id).
