Cross Browser Issues

T

thekiller105

New Member
I'm creating a website using dreamweaver and was testing it for Firefox,IE, and Chrome. My problems are:

1) I'm having trouble aligning the nav buttons so that it stretches across the page without leaving a gap on the right side. It looks good in IE right now, but their is a significant gap in Chrome and a minor one on firefox.

2) In IE if you mouse over any of the nav buttons and continue down into the page the button for "forum" will appear as if it's being hovered over.

3) Also in IE, in the breadcrumbs its showing an additional ">"

Hopefully someone can look at the code and help me figure out how to solve these issues. Thanks!
 
mediacontour

mediacontour

New Member
Please post the link for the website in order to help diagnose the issue. There are almost always differences in alignment between different browsers--you can use if php commands to create variations of your web page that are designed specifically for different browsers and will display your site according to the visitor's browser. The following article should be hlepful: http://www.sitepoint.com/article/browsers-suck-php-rescue/.
 
T

thekiller105

New Member
I do most all of my checking in FF so it shouldn't really have any problems, but when I fixed the heading nav bar in IE, FF started to show the slightest gap on the right, not really a problem I'm going to hurt myself over if I don't have too, but the gap in Chrome is substantial as well as the other issues that persist in IE.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Ok right off the back...you have way too many divs. You do not need to wrap a UL in a div (in most cases) because they are both block level elements and therefore will act the same. You also do not need to wrap divs within divs just to hold everthing together, use positioning (do a google search on this, there are many tuts on it). In short your code needs some spring cleaning, it will help you out tremendously.

Now to tackle the matter at hand....
You have 6 ULs for the navigation, you only need one. Use one of these two methods for the single UL list items, either {display:inline;} or {float:left;} . Either one of these will stack each LI next to each other, instead on top of one another. The gap you are getting is probably from the inherited margin/padding for each UL (which differ from browser to browser, hence the varying size of the gap)

You have the right idea going with no tables, however, you still need to refine the use of divs and uls. Just looking at the header section quickly I saw around three divs and 5 uls that were not needed.

If I get a chance I will clean that part up for you.

Good luck
 
You must log in or register to reply here.
Top