Cross Browser Compatibility

[thekiller105]

I'm working on my site http://www.collegehaze.com and seem to have some issues with the navbar and breadcrumbs in internet explorer. If someone could possibly help me find a solution that would be great.

Thanks!

 

[treker]

Looks allright here - IE8.

 

[PixelPusher]

what version of IE?

 

[thekiller105]

I'm running IE8. I've taken a screen shot of what I see. Do you not see the same two problems. 1) "Contribute" on the Nav stays highlighted if you roll over any other part of the nav bar. 2) the breadcrumbs is two lines tall with an one line just being a blank bullet point. Thanks for the help.

 

[PixelPusher]

Yes I see the same thing....will try to find the problem

 

[PixelPusher]

Whoa! Ugly code for that navbar...why some many ULs?

Errors:

• you dont need a UL for each link, use floats
• you cannot add a link inside a UL tag but outside a LI tag, must be inside the LI.

I suggest you build the navbar like this:

Markup

<ul class="topnav">
   <li><a href="">home</a></li>
   <li><a href="">accessories</a></li>
   <li><a href="">games</a></li>
   <li><a href="">articles</a></li>
   <li><a href="">recipes</a></li>
   <li><a href="">contribute</a></li>
</ul>

CSS

ul.topnav {
   margin:0;
   padding:0;
   height:45px;
   width:900px;
   background:url(theLightGreyImageOnePixelWide.png) repeat-x;
}
ul.topnav li {
   float:left;
   list-style-type:none;
}
ul.topnav a:link, ul.topnav a:visited {
   display:block;
   padding:0 7px;
   margin:0;
   font:bold 10pt Verdana;
   color:#777;
   text-align:center;
   text-decoration:none;
   text-transform:capitalize;
   height:45px;
   line-height:45px;
}
ul.topnav a:hover, ul.topnav a:focus{
   background-color:#AEAEAE;
   color:#666;
}

 

[PixelPusher]

Oh yeah one other thing, which ever type of measuring unit/type you use, it is best to stay consistent (in most cases).

Meaning, if you use pixels for width, stay with pixels for other items, percentages with percentages. Em i have only really seen with fonts.

 

[thekiller105]

Thanks for the advice. I started off the site with a template and have been doing a lot of customization. Since I'm still fairly green when it comes to coding I don't really know what should and shouldn't be there. I'm sure the code is rather bloated. I'll rework the nav bar, do you have any idea for the breadcrumbs?

 

[PixelPusher]

Want to say, I wasn't not trying to offend you about the code, it was just messy. In regards to the breadcrumb,

A UL does not accept list-style attributes, the LI (list items) does, so you don't need to specify:

list-style-type:none;
list-style-image:none;

in the style for the UL. They belong in the LI style for the breadcrumb list.

That being said, you have set the background of the breadcrumb LI to the arrow image, but in effect, it creates a list style image. Instead of using the "background" attribute of the LI style, use the "list-style-image" attribute. Like so:

ul.breadcrumb li {
   list-style-type:none;
   list-style-image:url(yourBulletImage.png);
   list-style-position:outside;
}

or you can write it in shorthand like this:

list-style:none outside url(yourBulletImage.png);

That should fix the breadcrumb issue.

 

[thekiller105]

No offense taken. Like I said, I'm pretty new to developing and I've been working off of a template. I expected during the customization that some code would get messy, but unfortunately that code was already there from the template.

I plan on in the future being able to do my site from scratch so any advice/constructive criticism is appreciated fully.