Hi all,

Here's a sneak preveiw of my new site layout (Pure CSS/DIV, ASP.NET)

http://www.inoxia.co.uk/dotnet

Slight problem that I just can't figure out... could be a rendering bug in IE?
Under the title, under where the control panel / shipping / privacy links are, there's 2 blue lines separated by a gradient. If you're looking at it in Firefox, you'll see more links (Home, About Us, Contact, etc) and a breadcrumb on top of that. If you're looking in IE, you won't.

Any ideas? If you refresh the page you can sometimes see the text as it's being rendered, which leads me to beleive the text is being drawn first, then the background... but I'm not totally sure.

Here's the code:

	<div id="ContentLinks">
	<span class="left" id="spnLinks2" style="margin-left: 10px">
	 <a href="index.asp">Inoxia Home</a> |
	 <a href="content/info/about.aspx">About Us</a> |
	 <a href="content/info/contact.aspx">Contact Us</a> |
	 <a href="content/info/faq.aspx"><acronym title="Frequently Asked Questions">FAQ</acronym></a> |
	 <a href="content/about/news.asp">Latest News</a>
	</span>
	<span class="right" id="spnBreadcrumb" style="margin-right: 10px">
	 Inoxia Home
	</span>
	<div class="spacer"></div>
   </div>

And the CSS:

  
div#ContentLinks {
	background-image: url(../images/links_bg.jpg);
	border-top: 1px solid #0000FF;
	border-bottom: 1px solid #0000FF;
	position: relative;
	top: -1px;
	font-weight: bold;
	color: #333333;
}
.left {
	float: left;
	text-align: left;
}
.right {
	float: right;
	text-align: right;
}
div.spacer {
	clear: both;
}

The left, right and spacer CSS Styles are borrowed from Real World Style's 7-10 Split (http://realworldstyle.com/split.html)

Hi Minaki,

Your link doesn't direct me to the page, I tried typing the url but that didn't help either. Did you take the page down?

With out seeing the page there are only two things I can think to say. One I hate IE . Two, try adding to the css;

div#ContentLinks {
background-image: url(../images/links_bg.jpg);
border-top: 1px solid #0000FF;
border-bottom: 1px solid #0000FF;
position: relative;
display: block; /*insist the element in it's enitrity*/
top: -1px;
height: ??px /*the height of your element*/
font-weight: bold;
color: #333333;
}

This hopefully solves your problem. If not, let me see the page and I will try and come up with something else.

Good luck,

Grrr, there isn't anything wrong with IE6. It is great, well sort of. Firefox is better.
Anyway, the links that you mentioned that don't show up are in <SPAN> tags correct? Get rid of them. Until I can see what it is like then I can decide what is the true reason for 1 having <SPAN> tags and 2 not using something else.

*growls at web host*
Site's back up now. Adding the height worked fine. Not sure why, the spacer DIV should of sorted that out...
Any idea why it looks shoddy in Opera? It seems to be putting margins or padding or something where there shouldn't be...

Hello,

I'm glad the above helped. As far as I have been able to tell Opera has some default padding on top of about 8px, usually adding padding: 0; to the body tag will deal with this, so I would suggest trying the same to the contentlinks tag. I don't have OPera installed here at work so I can't tell whats going on until I get home, so if this doesn't help let me know and I will try and come up with something else.

Good luck,

Ahhhhhh who's idea in the Oprea development team was it to put default padding on the body element?! For anybody who's interested, or reading this thread in the future wanting to sort a simular problem, add padding: 0px; to the body element.

Hey Minaki,

I viewed your page in IE and FireFox and I could NOT see the navbar links in IE. Everything seemed fine in FireFox.

I havn't uploaded the changes yet... it's still on my test server.