As a newbie to the css, I am running into trouble in IE.
I have two blocks of text that contain a list of radio stations. They are positioned properly in FF and Safari, but in IE they move to the top of the page. Below is both my HTML code and my CSS. I have also attached screen shots.
I have verified my html docs and checked the compatibility in Dreamweaver - neither are displaying any errors.
Any help would be so so appreciated!
HTML ------ </style> </head> <body class="oneColElsCtrHdr"> <div id="container"> <div id="header"> <ul id="stnsBlockOne"> <li id="linkItem"><a href="vancouver_home.html">Vancouver 106.3 FM</a></li> <li id="linkItem"><a href="calgary_home.html">Calgary 88.1 FM</a></li> <li id="linkItem"><a href="edmonton_home.html">Edmonton 89.3 FM</a></li> </ul> <ul id="stnsBlockTwo"> <li id="linkItem"><a href="toronto_home.html">Toronto 106.5 FM</a></li> <li id="linkItem"><a href="ottawa_home.html">Ottawa 95.7 FM</a></li> </ul> </div><!-- end #header --> <div id="footer"> <ul id="footerText"> <li id="footerLink"><a href="#">Contact</a></li> <li id="footerLink"><a href="#">Advertising</a></li> <li id="footerLink"><a href="#">Programming</a></li> <li id="footerLink"><a href="#">About</a></li> </ul> </div> <!-- end #footer --> <div id="bottom"> <p>All Rights Reserved AVR, 2009</p> </div><!-- end #bottom --> </div><!-- end #container --> </body> </html> ------ CSS--- body { margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; background-color: #ececec; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } .oneColElsCtrHdr #container { width: 940px; text-align: left; /* this overrides the text-align: center on the body element. */ background-image: url(images/AVR_Main_Image.jpg); background-repeat: no-repeat; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .oneColElsCtrHdr #header { width:940px; height:563px; float: none; clear: both; } #stnsBlockOne { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#FFFFFF; direction: ltr; float: left; width:165px; z-index: 1; margin-top: 390px; margin-left: 112px; } #stnsBlockTwo { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#FFFFFF; direction: ltr; float:left; width:142px; z-index: 1; margin-top: 390px; padding-left: 0px; margin-left:35px; } #linkItem { text-transform: none; padding: 6px 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:active { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color:#C33; text-decoration: none; }
//mod edit: code tags added to source. --gt
Attachment | Size |
---|---|
FF_version.png | 727.06 KB |
IE_version.png | 693.57 KB |
can you give us a link? if
can you give us a link? if no link,, plz post ALL your html and css in code tags.
Hi and thanks for
Hi and thanks for responding.
I've been playing around with the CSS a bit more so here is the revised version. I have included all of my CSS.
Here is the link to the site so you can see what I mean.
http://www.avr-radio.com/index.html
Revised CSS -----
@charset "UTF-8"; /* CSS Document */ body { margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; background-color: #ececec; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } .oneColElsCtrHdr #container { width: 940px; text-align: left; /* this overrides the text-align: center on the body element. */ background-image: url(images/AVR_Main_Image.jpg); background-repeat: no-repeat; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .oneColElsCtrHdr #header { width:940px; height:563px; float: none; clear:both; margin-left:153px; } #stnsBlockOne { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#FFFFFF; direction: ltr; display:block; float: left; width:165px; z-index: 1; margin-top:393px; padding:0px; } #stnsBlockTwo { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#FFFFFF; direction: ltr; display:block; float:left; width:165px; z-index: 1; padding:0px; margin-left:34px; margin-top:393px; } #linkItem { text-transform: none; padding: 6px 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:active { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color:#C33; text-decoration: none; } .oneColElsCtrHdr #footer { background-image: url(images/AVR_Main_footer.jpg); background-repeat: no-repeat; margin-left:63px; margin-top:0px; height:18px; display:block; } #footerText { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#999; font-weight:bold; z-index: 1; margin-left: 40px; margin-bottom:5px; margin-top:0px; } #footerLink a:link { color:#999; text-decoration: none; float:left; padding-right:9px; padding-left:9px; padding-top:0px; } #footerLink a:active { color:#999; text-decoration: none; float:left; padding-right:9px; padding-left:9px; } #footerLink a:visited { color:#999; text-decoration: none; float:left; padding-right:9px; padding-left:9px; } #footerLink a:hover { color:#666; text-decoration: none; float:left; padding-right:9px; padding-left:9px; } #bottom { background-image: url(images/AVR_Main_bottom.jpg); background-repeat: no-repeat; height: 64px; margin-left:65px; } #bottom p{ padding-left:88px; padding-top:5px; margin-top:0px; color:#999; font-size:8px; font-family: "Lucida Grande", Lucida, Verdana, sans-serif; }
i'd work out those
i'd work out those validation errors. ID's can only be used one time.
I just did a validation and
I just did a validation and didn't get any errors. Can you be more specific?
<li id="footerLink"><a
<li id="footerLink"><a href="#">Contact</a></li> <li id="footerLink"><a href="#">Advertising</a></li> <li id="footerLink"><a href="#">Programming</a></li> <li id="footerLink"><a href="#">About</a></li>
This code is invalid. See how you have id="footerLink" used more then one time? ID's can only be used one time. Classes can be used more then once.
Duh! Sorry about that. Okay,
Duh! Sorry about that. Okay, I've fixed it and recopied the revised html and css so that I'm using classes repeatedly and not ids.
Thanks!
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The AVR Network</title> <style type="text/css"> <!-- @import url("stylesheet_Main.css"); --> </style> </head> <body class="oneColElsCtrHdr"> <div id="container"> <div id="header"> <ul id="stnsBlockOne"> <li class="linkItem"><a href="vancouver_home.html">Vancouver 106.3 FM</a></li> <li class="linkItem"><a href="calgary_home.html">Calgary 88.1 FM</a></li> <li class="linkItem"><a href="edmonton_home.html">Edmonton 89.3 FM</a></li> </ul> <ul id="stnsBlockTwo"> <li class="linkItem"><a href="toronto_home.html">Toronto 106.5 FM</a></li> <li class="linkItem"><a href="ottawa_home.html">Ottawa 95.7 FM</a></li> </ul> </div><!-- end #header --> <div id="footer"> <ul id="footerText"> <li class="footerLink"><a href="#">Contact</a></li> <li class="footerLink"><a href="#">Advertising</a></li> <li class="footerLink"><a href="#">Programming</a></li> <li class="footerLink"><a href="#">About</a></li> </ul> </div><!-- end #footer --> <div id="bottom"> <p>All Rights Reserved AVR, 2009</p> </div><!-- end #bottom --> </div><!-- end #container --> </body> </html>
CSS --------
@charset "UTF-8"; /* CSS Document */ body { margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; background-color: #ececec; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; } .oneColElsCtrHdr #container { width: 940px; text-align: left; /* this overrides the text-align: center on the body element. */ background-image: url(images/AVR_Main_Image.jpg); background-repeat: no-repeat; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .oneColElsCtrHdr #header { width:940px; height:563px; float: none; clear:both; margin-left:153px; } #stnsBlockOne { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#FFFFFF; direction: ltr; float: left; width:165px; z-index: 1; margin-top:393px; padding:0px; } #stnsBlockTwo { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#FFFFFF; direction: ltr; float:left; width:165px; z-index: 1; padding:0px; margin-left:34px; margin-top:393px; } .linkItem { text-transform: none; padding: 6px 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:active { color: #FFFFFF; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color:#C33; text-decoration: none; } .oneColElsCtrHdr #footer { background-image: url(images/AVR_Main_footer.jpg); background-repeat: no-repeat; margin-left:63px; margin-top:0px; height:18px; display:block; } #footerText { list-style:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.4em; color:#999; font-weight:bold; z-index: 1; margin-left: 40px; margin-bottom:5px; margin-top:0px; } .footerLink a:link { color:#999; text-decoration: none; float:left; padding-right:9px; padding-left:9px; padding-top:0px; } .footerLink a:active { color:#999; text-decoration: none; float:left; padding-right:9px; padding-left:9px; } .footerLink a:visited { color:#999; text-decoration: none; float:left; padding-right:9px; padding-left:9px; } .footerLink a:hover { color:#666; text-decoration: none; float:left; padding-right:9px; padding-left:9px; } #bottom { background-image: url(images/AVR_Main_bottom.jpg); background-repeat: no-repeat; height: 64px; margin-left:65px; } #bottom p{ padding-left:88px; padding-top:5px; margin-top:0px; color:#999; font-size:8px; font-family: "Lucida Grande", Lucida, Verdana, sans-serif; }
Sooo, does the problem still
Sooo, does the problem still persist? I loaded the above code in my IE browser, and the issue seems resolved.
Yes, which is interesting.
Yes, which is interesting. What version did you check in?
I used IE7. Try linking the
I used IE7. Try linking the css file instead of importing. I didnt import in my test code. If it persists, post a link to a live site so we can really dig into this.
You are a kind and patient
You are a kind and patient person!
Here is the link to the live site:
http://www.avr-radio.com/index.html
Okay, I have been testing on IE5 on my Mac.
racheld wrote:Okay, I have
Okay, I have been testing on IE5 on my Mac.
Forget about supporting any version of IE less than 6. IE5 on the mac is dead and even Microsoft doesn't support it any more. Actually I believe IE anything is dead on the mac.
Thanks for the info, Ed!
Thanks for the info, Ed!
Now I just need to figure out how to get IE7 on my Mac and I should be good to go.
Also, while your here, and because I'm a newbie, if I'm verifying that my html/css displays properly in Safari, Firefox and IE7 I should be covered in terms of testing right?
racheld wrote:Now I just
Now I just need to figure out how to get IE7 on my Mac and I should be good to go.
As far as I know IE5 was the last true Mac version. Just put a virtual partition on your mac and load windows into it. Then you can use the Windows versions. If you are going to do web development over any extended time then you have to find some way to run windows browsers so you can test them.
Also, while your here, and because I'm a newbie, if I'm verifying that my html/css displays properly in Safari, Firefox and IE7 I should be covered in terms of testing right?
Mostly but not entirely. There are subtle differences. If you are doing this professionally you should test them all, particularly if you are relying on javascript since they mostly all run different versions of js. IIRC Google chrome uses the same rendering engine as Safari but an entirely different version of javascript, for example.
Ed, thank you kindly for
Ed, thank you kindly for your insight and advice. Much appreciated!
wow, IE5 is such a dinosaur.
wow, IE5 is such a dinosaur.
Now I know. I will need to
Now I know.
I will need to get IE7 working on my mac for testing.
Thanks for all your help!
As Gary pointed out with his
As Gary pointed out with his edit to your first post, please use code tags when posting code.
will do!
will do!