Website Design Help

[StartHere]

I'm helping a friend of mine design his site. I think something went wrong with the main layout. When viewed in IE, it appears just fine. However, when viewed in Firefox, the bottom image of the center box seems to be offset to the right a tiny bit. It's not really important, but small things like that bug me.

If anyone could help me figure out how to fix it, that would be awesome.

The site is located here: XtremeFilez.com - Your Music Search Engine

 

[kceleb9]

Firefox has more strict adherence to Standards than IE - this is good and BAD. OFten the standards are STUPID - and IEs approach is more sound design wise.

One area is floating objects. IE will naturally float items left as a default - for example a table in a div - whereas Fifrefox is ambivalent about the float - unless you asign it directly.

Try adding style='float:left' to the image.

note - floating will also affect your perceived "height" in firefox - so you may need to set min-height to avoid other issues.

 

[tweak50]

Firefox has more strict adherence to Standards than IE - this is good and BAD. OFten the standards are STUPID - and IEs approach is more sound design wise.

I think proper implementation of CSS is better to say than adherence to standards.

 

[tsquez]

I recommend designing for Firefox first, then coding a separate style sheet for IE6 & IE7 . You can always call these additional style sheets in the header. You can also ad the IE hack to your style sheet if multiple sheets is not something you want to do (note this does increase the size of your style sheet and also will not validate)

For example, let's say you have the following nav bar that goes in the header div:

#nav {float:left; position: relative; margin-left:15px;}

In FF it shows correctly but in IE6 & IE7 it still shows as being lined up against the left wall so to speak. To fix you ad the IE hack as follows:

For IE6: #nav {_float:left;_position: relative;_margin-left:15px;}

For IE7: #nav {#float:left; #position: relative;#margin-left:15px;}

and all you do is adjust the values accordingly to match the browser.
and tweak50 is correct, there is no substitute for proper semantic markup.

 

[AdExhibitJason]

I recommend designing for Firefox first, then coding a separate style sheet for IE6 & IE7 . You can always call these additional style sheets in the header. You can also ad the IE hack to your style sheet if multiple sheets is not something you want to do (note this does increase the size of your style sheet and also will not validate)

For example, let's say you have the following nav bar that goes in the header div:

#nav {float:left; position: relative; margin-left:15px;}

In FF it shows correctly but in IE6 & IE7 it still shows as being lined up against the left wall so to speak. To fix you ad the IE hack as follows:

For IE6: #nav {_float:left;_position: relative;_margin-left:15px;}

For IE7: #nav {#float:left; #position: relative;#margin-left:15px;}

and all you do is adjust the values accordingly to match the browser.
and tweak50 is correct, there is no substitute for proper semantic markup.

Your first 2 post kind sucked. Since we here do not like that type of stuff.

This one however. Good at least you do know something. I am sure this is some great information.

 

[tsquez]

Yeah my first one kinda sucked, didn't know what to say or do....lol, but I do know about design, layout and css and I plan on helping out here as much as possible.

 

[Liquidmarke]

Yeah my first one kinda sucked, didn't know what to say or do....lol, but I do know about design, layout and css and I plan on helping out here as much as possible.

This guy know nothing about design. I'm just playing. He does great designs and has done work for me.