3 replies [Last post]
Rufustilskin
Rufustilskin's picture
Offline
newbie
Seattle, WA
Last seen: 13 years 30 weeks ago
Seattle, WA
Joined: 2007-05-05
Posts: 3
Points: 0

Howdy,

I've got this strange behavior in Explorer 6 but not in 7 or in Firefox. When I click on one of my navigation link buttons, the new page opens, but the text content in the middle of my middle column (of 3) doesn't appear until I roll off the image. It then stays until I click on another of the navigation buttons.

I'm not sure how much code will be helpful or necessary. But here's my code below for the navigation. Like I said its real vanilla. I think the issue has got to be some quirks behavior in IE that I haven't read about anywhere. Code:

body { margin: 2em; padding: 0; font-family: Georgia, times, "times new roman", serif; color: #000; background-image:url(images/stars_back.gif); }

a:link
{
color: #036;
}

/*a:visited
{
color: #066;
}*/

a:hover, a:active
{
color: #fff;
background-color:#666666;
}

div#banner
{
padding: 0px;
margin: 0px;
color: #000;
background-color:#996600;
border-bottom: 1px solid #000;
}

div#banner h1
{
margin: 0px;
padding: 0px;
font-size: 5em;
font-weight: normal;
font-variant: small-caps;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
background-color:#996600;
color:#000000;
}

div#container
{
background-repeat: repeat-y;
border-color:#993300;
border: 2px solid;
background-color:#FFFFFF;
}

div#container2
{
background-repeat: repeat-y;
background-position: right;
}

div#navigation
{
float: left;
width: 150px;
height: 400px;
padding-top: 2em;
}

div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

div#navigation ul li
{
margin-top: 4px;
}

#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
background-color:#CCCCCC;
background-repeat: repeat-y;
}

#navigation ul li a:hover
{
color: #fff;
background-color:#666666;
background-repeat: repeat-y;
}

div#more
{
float: right;
width: 160px;
height: 400px;
margin: 0;
padding: 2em 10px 0 0;
color: #000;
}

div#more h3
{
margin-top: 0;
color:#000000;
padding: .2em;
background-position: right;
background-repeat: repeat-y;
}

div#content
{
margin-left: 190px;
margin-right: 200px;
line-height: 150%;
color:#000000;
}

div#content h2
{
font-size: 2em;
color:#000000;
margin: 0;
padding-top: 1em;
font-weight: normal;
}

Any suggestions how to remedy?

Thanks,
Jonathan

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Jonathan welcome to the

Jonathan welcome to the forum,

If you had read the forum stickies and posting guidelines you would know what we ask people to provide in the way of code; all CSS, all html and preferably a link to the page in action.

From just the CSS it is going to be very hard to figure out what is happening. One diaganostic technique you can try in the meantime is to place this rule in your stylesheet to test whether you have a hasLayout requirement for elements in IE

* {zoom:1;}

Also I think you have a mis-understanding of the use of the background property go through and remove all the references to background position and background repeat.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Rufustilskin
Rufustilskin's picture
Offline
newbie
Seattle, WA
Last seen: 13 years 30 weeks ago
Seattle, WA
Joined: 2007-05-05
Posts: 3
Points: 0

Thanks for the reply. The

Thanks for the reply. The site is:

s119658128.onlinehome.us

The same code is on every page at this point:

Test Doc

Find Out More

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

Heading here

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

body { margin: 2em; padding: 0; font-family: Georgia, times, "times new roman", serif; color: #000; background-image:url(images/stars_back.gif); }

a:link
{
color: #036;
}

/*a:visited
{
color: #066;
}*/

a:hover, a:active
{
color: #fff;
background-color:#666666;
}

div#banner
{
padding: 0px;
margin: 0px;
color: #000;
background-color:#996600;
border-bottom: 1px solid #000;
}

div#banner h1
{
margin: 0px;
padding: 0px;
font-size: 5em;
font-weight: normal;
font-variant: small-caps;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
background-color:#996600;
color:#000000;
}

div#container
{
background-repeat: repeat-y;
border-color:#993300;
border: 2px solid;
background-color:#FFFFFF;
}

div#container2
{
background-repeat: repeat-y;
background-position: right;
}

div#navigation
{
float: left;
width: 150px;
height: 400px;
padding-top: 2em;
}

div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

div#navigation ul li
{
margin-top: 4px;
}

#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
background-color:#CCCCCC;
background-repeat: repeat-y;
}

#navigation ul li a:hover
{
color: #fff;
background-color:#666666;
background-repeat: repeat-y;
}

div#more
{
float: right;
width: 160px;
height: 400px;
margin: 0;
padding: 2em 10px 0 0;
color: #000;
}

div#more h3
{
margin-top: 0;
color:#000000;
padding: .2em;
background-position: right;
background-repeat: repeat-y;
}

div#content
{
margin-left: 190px;
margin-right: 200px;
line-height: 150%;
color:#000000;
}

div#content h2
{
font-size: 2em;
color:#000000;
margin: 0;
padding-top: 1em;
font-weight: normal;
}

#cleardiv
{clear: both;
height: 1em;
}

div#footer
{
clear: both;
padding: .5em 1em;
border-top: 1px solid #999;
text-align: right;
}

div#footer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

div#footer li
{
display: inline;
margin-right: 1em;
}

Thanks,
Jonathan

Rufustilskin
Rufustilskin's picture
Offline
newbie
Seattle, WA
Last seen: 13 years 30 weeks ago
Seattle, WA
Joined: 2007-05-05
Posts: 3
Points: 0

Fixed problem

As I was posting the code above, I noticed I had these extra body tags. I'm not sure how they got there. But I removed them and I no longer see the problem.

Thanks for your time.
Jonathan