Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css looks dodgy

Status
Not open for further replies.
taylorj

taylorj

Programmer
Oct 21, 2003
14
IE
Here is a style sheet i'm using with ie6, the problem is with the banner. I cant seem to get it to display the colour properly... any hints?


body
{
margin: 0;
padding: 0;
color: #000;
background-color: #ddd;
}


#container
{
margin: 1em 5%;
background-color: #FFF;
border: 1px solid #333;
}



#banner
{
background-color: #FCO;
border-bottom: 1px solid #333;
}


#banner h1
{
margin: 0;
padding: .5em;
}


#nav
{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}


#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
}



#footer
{
clear: both;
background-color: #FFF3AC;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}

/*styles i will try to incoeporate into the nav layer*/
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

ul li {
position: relative;
}
 
Sort by date Sort by votes
Could you show the HTML you're using?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Code: 
#banner
{
background-color: #FCO;
border-bottom: 1px solid #333;
}
background-color looks like a letter O instead of number 0

Cheers, Mike.
 
Upvote 0 Downvote
Code: 
banner
{
background-color: #FC[COLOR=red][b]O[/b][/color];
border-bottom: 1px solid #333;
}

The "O" should be a "0" (zero)? There no "O" in hex.

If that's not the problem then please define "properly"



- Web design and ranting
- Day of Defeat gaming community
"I'm making time
 
Upvote 0 Downvote
nicely done guys :)

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
hey guys,
sorry for replying so late and thanks for the help. That fixed the background color but there is a white stripe accros the to top of the banner- I think this is from the container. I want the banner to sit on the top of the container. My Html is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html>

<head>
<title>simple document</title>
<!-- meta data and link to style rules -->
<meta name = "tech" http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="SiteStyleRules.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">

<div id="banner">
<p> <H1> MY BANNER</H1></p>
</div>

<div id="nav">

<ul>
<li></li><a href = "#"> Heroes and Heroines </a></li>
<li><a href = "#"> Gods And Godesses </a></li>
</ul>

</div>

<div id="content">
<h2>
MY CONTENT GOES HERE </h2>

</div>

<div id="footer">
FOOTER
</div>

</div>

</body>
</html>
 
Upvote 0 Downvote
I think it's a "feature" of IE6. Get rid of blank lines in your source code - particularly between <body> and the first 2 <div>s. And if that's not good enough, put div {margin:0;} into your CSS.

Cheers, Mike.
 
Upvote 0 Downvote
body { margin-top: 0; }

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
I tried both of your suggestions Mike, I put div {margin:0;} into the banner in my css doc, but to no avail
 
Upvote 0 Downvote
taylorj-

Add this to your CSS:

Code: 
#banner p {
	margin: 0;
}

Or get rid of the [tt]<p></p>[/tt] tags from your banner alltogether.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Thanks a million mike that worked a treat
 
Upvote 0 Downvote
if you are speaking to me, I am not mike. if not, nevermind.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Contextually it does not seem that way Foamcow, as the problem he was having was the extraneous <p> tag.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
lol

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
... uh ... I just woke up. Been practising cLFlaVA's tagline. Was someone talkinng about me ?

Cheers, Mike.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
722
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
375
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
297
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
328
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
128
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top