www.teamspeakdisplay.com (Username: user / Password: teamspeakdisplay)

The site looks great in firefox 3, but has some issues with IE7.

my title is pushed way over to the right, not sure exactly why.

the contact form is really small, and the shoutbox submit button isnt aligned to the center like it should be.

Basically, if you look at the site in firefox, and then check it out with IE7, you can see the problems.

Does anyone know how to correct these problems and make everything look the same in both browsers?

Set #pane to position:relative, that'll put the absolutely positioned title relative to #pane. You will have to also add left: 10px (adjust as needed) to pull the title back where you want it.

I wont be able to test this until tomorrow....i dont like IE 7 so I havent installed here, and this site is TOTALLY messed up with IE 6.....

Thanks for the info though, I've made the changes, but just so im clear, left:10px is also for #pane?

what about the the problems with the shout submit button not being centered, and my contact form being really small?
the contact form, and shoutbox, have their styles applied per tag, since i couldnt use an external stylesheet without W3C validation problems.

well, looking at browsershots.org i can see that the title still isnt displaying properly.

left:10px is also for #pane?

No, sorry I wasn't clear - that would go on the titletext div you have. Remove the 25px left margin you've got on it too.

i checked browsershots.org and it seems the changes didnt fix anything with IE7

looks the same in everything else...except other IE variations.

whoops.... needed to refresh my browser.... sorry for the double reply here.
im tweaking this now.

still doesn't seem to be working..... unless i'm doing something wrong........
am i doing something wrong?

nevermind, i believe it was a problem with dreamweaver, and saving the wrong stylesheet.

As it turns out this did fix the problem. however in firefox the title is exactly where i want it. In IE, its at least in the right spot, but sits a little bit too far left.
If i adjust the stylesheet, then its going to affect firefox's alignement.

If i adjust the stylesheet, then its going to affect firefox's alignement.

This is why you use separate CSS stylesheets for the IE 'fixes" and conditional comments to call those separate files. Only IE will read conditional comments.

so i should use another css file???

My site contains some php, and my html files are parsed as php, so i could use php variables and stuff.

Only IE will read conditional comments.

With one exception. Non-IE browsers will recognize the !IE conditional comment, which although rarely needed (since we normally only throw exception rules to IE, since it is less-standard), is available. Try posting the following into your browser, then load it in Firefox:

<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->

***EDIT***
I just realized that this comment is formed differently than normal conditional comments(I've actually never used it). Can you spot the difference? Non-IE browsers don't actually "read" this, but see it as a normal comment. This makes IE see the <h1> as a comment....

Interesting, I've never seen that version either. Not sure what it's purpose is.

so i should use another css file???

Yes, but it only has to include the css 'fixes' needed to make IE behave, nothing else. Using a separate css file and conditional comments should have zero impact on your php.

alright, that makes sense, but then could i just use a php if statement to handle which css file loads? or is it better to use the IE conditional?
also, what is the difference in the conditional statements? ive never seen them before, so i dont know what your talking about.

the last time i attempted to make a website, it was back in the day before all these standards and cross browser stuff..... purely html, IE and nested tables upon tables....

If the PHP is doing browser sniffing I suppose you could do it that way, but if you just use the conditional comment, IE will be the only one to pay it any heed and you won't need browser sniffing - at least not for that.

so if i use the if for IE and have the other stylesheet load below it, wont it be loading 2 stylesheets if the user is using IE?

shouldnt there be an else in there?

is this what i'd do?

<!--[if IE 6]>
<link href="HTML/Includes/Style-IE.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<link href="HTML/Includes/Style.css" rel="stylesheet" type="text/css"/>

I understand now.

I load my normal stylesheet, then use the conditional comment to load a stylesheet for IE that contains ONLY the altered selectors.
CASCADING!!!!! ....

cool

p>Use the form below to send an email to the webmaster</p>
<div id="contactform">
<form action="/HTML/Contact.html" method="post"> <table style="width: inherit; padding-left: 2px;">

instead of use below code


P>Use the form below to send an email to the webmaster</P>
<DIV id=contactform>
<FORM action=/HTML/Contact.html method=post>
<TABLE width="85%" style="PADDING-LEFT: 2px">

after that u wil see ur contact form become broad

I load my normal stylesheet, then use the conditional comment to load a stylesheet for IE that contains ONLY the altered selectors.
CASCADING!!!!! ....

EXACTLY !!

Originally Posted by seomax

p>Use the form below to send an email to the webmaster</p>
<div id="contactform">
<form action="/HTML/Contact.html" method="post"> <table style="width: inherit; padding-left: 2px;">

instead of use below code


P>Use the form below to send an email to the webmaster</P>
<DIV id=contactform>
<FORM action=/HTML/Contact.html method=post>
<TABLE width="85%" style="PADDING-LEFT: 2px">

after that u wil see ur contact form become broad

That worked, but it doesnt align everything exactly as needed. It makes the form wider, but then its not the right length.
Also, the other "complication" is that this code, is actually spit out by a php file (the meat of the contact form) and i cant link to a stylesheet or anything like that, or else it invalidates my page at w3. all of the style info must be in the tags.... HTML 4.01 transitional i think is what that is. where as my site is XHTML 1.0 transitional, and css 2.1.

I havent really had alot of time to play with this, but ill have some a little later on so ill play around with it then.

Originally Posted by LadynRed

EXACTLY !!

took me a while to figure that out, and i actually stumbled on that little nugget randomly on the web lol.

in my defense, this is my first time learning about all this new fangled stuff.... as i mentioned above, my last attempt at a website was back in the days of a million nested tables.