• Locked
18 replies [Last post]
Fri, 2009-08-21 01:07
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

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&nbsp;&nbsp;106.3 FM</a></li>
      <li id="linkItem"><a href="calgary_home.html">Calgary&nbsp;&nbsp;88.1 FM</a></li>
      <li id="linkItem"><a href="edmonton_home.html">Edmonton&nbsp;&nbsp;89.3 FM</a></li>
    </ul>
    <ul id="stnsBlockTwo">
      <li id="linkItem"><a href="toronto_home.html">Toronto&nbsp;&nbsp;106.5 FM</a></li>
      <li id="linkItem"><a href="ottawa_home.html">Ottawa&nbsp;&nbsp;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

AttachmentSize
FF_version.png727.06 KB
IE_version.png693.57 KB
Top
Tags:
Fri, 2009-08-21 16:04
#1
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 30 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

Top
Fri, 2009-08-21 16:23
#2
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

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;
 
	}

Top
Fri, 2009-08-21 17:04
#3
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 30 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

i'd work out those

i'd work out those validation errors. ID's can only be used one time.

Top
Fri, 2009-08-21 17:11
#4
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

I just did a validation and

I just did a validation and didn't get any errors. Can you be more specific?

Top
Fri, 2009-08-21 17:17
#5
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 30 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

<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.

Top
Fri, 2009-08-21 17:32
#6
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

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&nbsp;&nbsp;106.3 FM</a></li>
      <li class="linkItem"><a href="calgary_home.html">Calgary&nbsp;&nbsp;88.1 FM</a></li>
      <li class="linkItem"><a href="edmonton_home.html">Edmonton&nbsp;&nbsp;89.3 FM</a></li>
    </ul>
    <ul id="stnsBlockTwo">
      <li class="linkItem"><a href="toronto_home.html">Toronto&nbsp;&nbsp;106.5 FM</a></li>
      <li class="linkItem"><a href="ottawa_home.html">Ottawa&nbsp;&nbsp;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;
 
	}

Top
Fri, 2009-08-21 18:14
#7
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 30 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

Top
Fri, 2009-08-21 18:23
#8
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

Yes, which is interesting.

Yes, which is interesting. What version did you check in?

Top
Fri, 2009-08-21 18:37
#9
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 30 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

Top
Fri, 2009-08-21 18:54
#10
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

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.

Top
Fri, 2009-08-21 19:09
#11
Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 7 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

racheld wrote:Okay, I have

racheld wrote:

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Top
Fri, 2009-08-21 19:13
#12
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

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?

Top
Fri, 2009-08-21 19:44
#13
Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 7 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

racheld wrote:Now I just

racheld wrote:

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.

Quote:

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 Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Top
Fri, 2009-08-21 19:49
#14
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

Ed, thank you kindly for

Ed, thank you kindly for your insight and advice. Much appreciated!

Top
Fri, 2009-08-21 20:59
#15
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 30 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

wow, IE5 is such a dinosaur.

wow, IE5 is such a dinosaur.

Top
Fri, 2009-08-21 21:38
#16
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

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!

Top
Sat, 2009-08-22 08:28
#17
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 26 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

As Gary pointed out with his

As Gary pointed out with his edit to your first post, please use code tags when posting code.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Top
Sat, 2009-08-22 13:31
#18
racheld
Offline
newbie
Last seen: 11 years 33 weeks ago
Joined: 2009-08-21
Posts: 10
Points: 0

will do!

will do!

Top
  • Locked