browser differences between firefox and IE

[wazz]

I am having CSS problems between Firefox, where my site looks fine, and IE where the text is not aligning correctly.

www.juxtaexposed.com

in IE, you can see the links in the header go to seperate lines. does this have to do with padding?

any help would be appreciated!

[rayzur]

Hello Wazz & welcome to Major Geeks,

You just need to give ul#nav a width.
I edited your CSS in my browser and it worked fine.
If you will change your ul#nav as below it should work for you.


ul#nav {
float: right;
font-size: 1.0em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
width: 50%;
}

[rayzur]

Or also a width of 500px to the UL and it was fine. IE likes widths:) Also set your padding and margin of the UL to zero. It now looks consistent on both browsers. You can then work your way into making it align as you wish see code beneath


Code:

ul#nav {
float: right;
font-size: 1.0em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
width:500px;
border:1px solid red;- this just for you to see the containig box
padding:0;
margin:0 0 0 0;
}

And if you need the Nav to move more to the right, simply add some pixel margins to the left

Code:

#nav li {
float: left;
list-style-type: none;
display: block;
margin-left: 40px;
margin-right: 0px;
}

One more thing, anytime I am debugging code the first thing I do is validate, I ran your html through W3C Validation (http://validator.w3.org/) and it found 34 errors. Run you page through there and it will show you what needs cleaning up

Good luck!

[wazz]

thanks Rayzur, for the help. that worked perfectly.

I tried the W3C Validator, and it gives me a message:

document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

<p align="center"><a href="http://www.juxtaexposed.com/wp-content/uploads/2008/0

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").




I dont understand how to fix this, because the <p> tag is put in automatically by Wordpress when I write my blog entries. Any suggestions?

Thank you!

[rayzur]

Glad the code worked out for you wazz.
It seems that the Wordpress editor may be the cause of the code errors, I am not very familiar with Wordpress themes. It is typical with all WYSIWYG editors to get bloated or excessive code. WYSIWYG just means "What You See Is What You Get", which is what I call "editing from the front side" of a web page.

The <p> tag just means begin paragraph and </p> means end paragraph.

I wouldn't worry too much about the errors now that I know your page was generated by the Wordpress editor.

Here's an article called "The Secret of Successful Editing of WordPress" (http://lorelle.wordpress.com/2005/09/08/the-secret-of-successful-editing-of-wordpress-themes/)
There is a link to the Wordpress support forum at the top of that page, you might do a search for "Validation Errors" there. I run the Firefox Web Developer Extension (https://addons.mozilla.org/extensions/moreinfo.php?id=60) in my browser, you'll see a description of it on that page. It is very handy and well worth installing.

Here is a good resource on Code Validation. (http://www.cameraontheroad.com/index.php?p=200)

If you ever decide you want to learn HTML & CSS without depending on WYSIWYG editors , I have a Website Building Resource Page (http://www.rayswoodworks.com/webdesign.html) at my website.

Hope that helps point you in right direction.