I'm not sure how to correct for these size difference. This is sort of my first real attempt to not use tables.

Borders:
IE: adds border to the inside
FF: adds border to the outside (making component display larger)

Padding:
IE: adds padding inside the component.
(component width of 10 + 2 padding yields component size of 10 with only 6 visible)
FF: expands component size relative to padding. (causes larger display)
(component width of 10 + 2 padding yields component size of 14)

Here's the site:
http://cca-software.com/euphoritech/

The CSS file:
http://cca-software.com/euphoritech/style.css

Recommended Answers

All 4 Replies

I can't see that you have a real problem there. It just looks slightly different in a different browser. If you have a more specific issue, please state it. You may also like to do a google on things like IE CSS hacks. These will help you make it look exactly the same in both browsers. But TBH your problem of it looking slightly different is not really a serious issue in my eyes. I am not saying that you shouldnt have posted just that you shouldn't worry about it.

A commonly used hack on IE is using the CSS child selector since IE (<=6) won't recognize them. For example:

body {...} <-- understood by both IE, FF, Opera or Safari
html>body {...} <-- FF, Opera or Safari

Like Phaelax has commented, I don't really see a major problem in terms of the user experience.

Like Phaelax has commented, I don't really see a major problem in terms of the user experience.

That's Roryt to you ;) but yes that is the way to do it and using * before a property will make only ie see it.

I solved the problem, incorrect doctype. But thanks for the tips mouse.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.