Firefox vs IE - formatting problems

Status
Not open for further replies.
MyOwnDemon

MyOwnDemon

Face Rocker
Jan 28, 2007
3,529
27
48
Iowa
www.sitestomp.com
I just launched another site, but I'm having lots of problems with the site not displaying correctly in IE.

It looks fine in Firefox (all versions), but when I fire up IE (any version) to have a look at it, the images are all in the wrong places, the alignment is messed up, and the text overlaps the images. Basically, it looks like shit.

Anyone else have this problem and what's an easy way to make sure it looks fine in all browsers? I was thinking maybe different homepages for either firefox or IE, but that seems like overkill when there's probably a better solution available.

I checked my logs and found that about 75% of the site's users are using IE, so I want to get this fixed as quickly as possible, as the site is taking in about 10 new users every 15 minutes.

Any help would be appreciated.
 


stanley said:
it's ALL in the css
post your source and we'll help
Click to expand...

Thanks. Much appreciated, dude. :D

I am PMing you the URL, so you can take a look. I'm figuring you can view the source from the site (?).

Also, the programmer isn't available until later tonight, and he does all the work on his end and FTPs it. But I can easily pass on any suggestions to him, so he can modify the code and get it live.
 
Like a lot of members here, I don't really like posting my URLs... but if anyone here is capable of helping me out and wants to take a look, PM me and I'll send you the URL.
 
different browsers, different css

Geriatric Fellatio... I am still stymied from that image you posted in another thread...

Ok... back to firefox, explorer etc...

I usually use seperate CSS depending on the browser. I hate IE, all versions of it, but that's what the masses use so... I usually code CSS for Firefox (a kludge, but at least standards compliant browser) then create a separate stylesheet for ie7 and often a separate for ie6 depending on the design.

It seems easier to me than trying to get one stylesheet to work for the gambit.

Let me know if you need some help with that and I will dig up some php for browser detection.

mondi
 
Yeah its usually a CSS issue, IE sucks balls Firefox kicks ass, actually I just finished creating a new theme for my blog and it works 100% in Firefox but its got some bugs in IE, so I'll have to fix those up tomorrow, but just so you know your not the only one who has to tweak for IE while after building for Firefox.
 
have a look at the "broken box model"
basically wherever you have a div with a set width (or a table cell - <td>) and a padding in the same div you should create and external div where you set the width, and an internal div where you set the padding: otherwise IE will make the div as wide as the sum of width + padding

IE sucks
 
* { margin=0; padding=0;}

Put that bad boy at the top of your css code. the asterik (bhahah i can't spell) and the zeros eliminate the default padding and margins that differ between IE Firefox, etc.
 
sp111 said:
* { margin=0; padding=0;}

Put that bad boy at the top of your css code. the asterik (bhahah i can't spell) and the zeros eliminate the default padding and margins that differ between IE Firefox, etc.
Click to expand...

Please don't use CSS hacks. They're never needed if you know what you're doing.
 
I don't see how the margin and padding would influence a screwed layout
I often use that setting for margin and padding, but just because I don't like the default white space at the top
 
For everyone thats wondering about the whole margin/padding IE/Firefox fuck up its really got nothing to do with that, it is all in your float tags, for instance if I've got something like so.

Code: 
/*CSS PART*/

#Example{
    float:left;
}
#Example2{
    float:right;
}

/*HTML PART*/
<div id="Example">BLA BLA BLA I"M AN IMAGE</div>
<div id="Example2">BLA BLA BLA I"M A BUNCH OF TEXT <div class="fuckedrightup">WITH SOME OTHER ELEMENTS</div></div>

Now common sense between Firefox and IE would suggest these two items would display correctly, however they DO NOT, firefox will display them correctly but IE WILL NOT.

Why?

Because when using the float element, the rules state you should also be including a width element, now Firefox seems to be smart enough to figure this shit out, however IE cannot get their head around it.

Another example, look at the header of my blog (sig), there you will see an image floating to the left, but floating to the right you'll see a search box in its own div and the post/comments RSS links in their own respective div tags.

Now if I don't include a width element along side of my float elements then FireFox will display them 100% but IE will only display the logo correctly and the other elements will be all over the place, by placing respective width elements along side each one then both IE and FireFox can both happily work together.

SIMPLE, SIMPLE, SIMPLE.

If your still confused as fuck then read "CSS Float Theory: Things You Should Know" but more importantly this snippet.

“You should always set a width on floated items (except if applied directly to an image - which has implicit width). If no width is set, the results can be unpredictable.”
Click to expand...
 
I usually design in IE, and 99.9% of the time, once it works in IE, it's pretty much fine in FF as well. IE sucks, but until the masses realize it, we're all fucked in coding websites for it.
 
Status
Not open for further replies.
Top Bottom
Back