Grabeorama Posted January 26, 2009 Share Posted January 26, 2009 I have a webpage with CSS.The page consists of a few <div> tags. The problem I have, is that when I use padding, the padding makes the div wider than it should be.When viewing the page in IE, the divs are the right width (usually 100%) and the padding works fine. However, when in Fierfox or Chrome the width of the div has increases on all sides by the padding value I set (usually 4px).Is there either a way to fix this, or another way of padding text?Thanks~Grabeorama Link to comment Share on other sites More sharing options...
jeffman Posted January 26, 2009 Share Posted January 26, 2009 You got it backwards. Firefox et al use the standard model. IE does not. Change your doctype to strict, and write standards-compliant code so the doctype sticks, and then get used to adding pads, margins, and borders in the other direction. Link to comment Share on other sites More sharing options...
Grabeorama Posted January 26, 2009 Author Share Posted January 26, 2009 How do you change your doctype? Link to comment Share on other sites More sharing options...
jeffman Posted January 27, 2009 Share Posted January 27, 2009 Paste this at the TOP TOP TOP of your doument, before the <html> tag: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Then validate your page here: http://validator.w3.org/If you still have any bad html habits leftover, or even just errors, this will find them. Correct them. It's the only way to make sure browsers respect the doctype. If IE drops into "quirksmode," it will use the old box model that's giving you fits. The strict doctype ensures that everybody builds boxes the same way.EDIT: More info on doctypes here: http://www.w3.org/QA/2002/04/valid-dtd-list.html Link to comment Share on other sites More sharing options...
Grabeorama Posted January 27, 2009 Author Share Posted January 27, 2009 O.k thanks I'll take a look.Do you have to validate each page you create? Link to comment Share on other sites More sharing options...
jeffman Posted January 27, 2009 Share Posted January 27, 2009 Like, will the W3C police come and get you if you don't? No. :)But validation is a good habit. I routinely catch a couple of dumb things. We're only human. Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 27, 2009 Share Posted January 27, 2009 O.k thanks I'll take a look.Do you have to validate each page you create?Yes. If you don't the W3Police will come to your office.orYes. 1) you catch errors before they are in production, 2) it is much easier to fix something when you start off from a solid base rather than fix it, fix the code and then have to fix it again.Further, check it out in browsershots.org. I found my site wasn't cool in IE6 and then fixed it of course, but you can't fix what you don't know is broken. Link to comment Share on other sites More sharing options...
Grabeorama Posted January 27, 2009 Author Share Posted January 27, 2009 heh, ok I get it :)But by adding the line<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">It just made my page look bad on all browsers!Check it out here Link to comment Share on other sites More sharing options...
jeffman Posted January 27, 2009 Share Posted January 27, 2009 Yeah. That happened to some of my pages too, when I made the switch, and all were affected in some way. You never know how much until you actually do it. Wish I had an easy answer . . . Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 27, 2009 Share Posted January 27, 2009 heh, ok I get it :)But by adding the line<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">It just made my page look bad on all browsers!Check it out here That can happen when you build in IE and then want better browsers to see it. Without the DOCTYPE, you are in what is called "quirks mode" of IE. The rules are different there than anywhere else on the web.Fix the errors and start building in Firefox or a compliant browser then add whatever is needed for IE. Your life will be easier in the long run. Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 27, 2009 Share Posted January 27, 2009 BTW, why are you using frames? There are many reasons to not use them, but what is a reason to use them? Link to comment Share on other sites More sharing options...
jeffman Posted January 27, 2009 Share Posted January 27, 2009 I can answer that, I think. It's the way Grabe's site is hosted. Grabe owns the URL, but doesn't pay for the site, so the host displays his files inside a frame to create the illusion that the URL and the host are the same. My least favorite method of free hosting. But if it works for Grabe . . . Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 27, 2009 Share Posted January 27, 2009 I can answer that, I think. It's the way Grabe's site is hosted. Grabe owns the URL, but doesn't pay for the site, so the host displays his files inside a frame to create the illusion that the URL and the host are the same. My least favorite method of free hosting. But if it works for Grabe . . .He should be using a frame DOCTYPE in that case. It will still have a couple of errors on it even then.Error checker Link to comment Share on other sites More sharing options...
Grabeorama Posted January 28, 2009 Author Share Posted January 28, 2009 Yeah, it's a long story :)So is there any way of making the page look 'it's best' in most browsers? Or is there a different way of padding? Link to comment Share on other sites More sharing options...
jeffman Posted January 28, 2009 Share Posted January 28, 2009 This is not what you want to hear, but you'll get the best results simply building from the ground up. Develop in Firefox and tweak for IE. Check the major stuff on both browsers before adding more stuff.You understand the standard box model?If you define a div to be 100px wide, then add 5px margin to each side, the entire box is now 110px wide. Add 5px padding to each side, and the entire box is now 120px wide. Add a 1px border to each side, and the total box width comes to 122px. In old IE, it would still be 100px. So that's your difference. Any new designs or fixes to old work have to do box-math using the standard method, not the IE method (even if, at first blush, the IE method sorta kinda makes more sense). Link to comment Share on other sites More sharing options...
Grabeorama Posted January 28, 2009 Author Share Posted January 28, 2009 Yeah, I'm just after realizing that now :)What's the standard width used for a webpage?I used to use width: 100% etc. but I think it would be easier to use exact widths.Thanks for the help so far Link to comment Share on other sites More sharing options...
jlhaslip Posted January 28, 2009 Share Posted January 28, 2009 I use 990px for fixed width pages since the most common / minimum monitor size has grown to 1024 wide. Deduct for the scrollbar width. Works for me. Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 28, 2009 Share Posted January 28, 2009 Yeah, I'm just after realizing that now :)What's the standard width used for a webpage?I used to use width: 100% etc. but I think it would be easier to use exact widths.Thanks for the help so far I like not using a fixed width. That's called fluid design. That way the page looks OK if the user shrinks the browser window or not. Further, other devices can see the page better. Link to comment Share on other sites More sharing options...
Grabeorama Posted January 29, 2009 Author Share Posted January 29, 2009 Yeah, I preferred using fluid design, but it's much harder to get my pages to look good that way. At least with the fixed widths, I'm pretty close to getting it right. Link to comment Share on other sites More sharing options...
jeffman Posted January 29, 2009 Share Posted January 29, 2009 There are good arguments for either. FWIW, Microsoft currently uses a fixed width of something over 900px. Not that they are the final judges of taste, but they're not stoopid either. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.