PDA

View Full Version : An interesting <div> width problem


imported_handidrummed
11-16-2004, 06:29 PM
Hey everyone,

Here's a brain twister for you..

I'm recoding my website using <div>'s and CSS instead of tables.

http://www.handidrummed.com/index_new.html

At the bottom of the screen, notice the "footer" that says Test in it? Well, I've been having an interesting problem with the width.

The width of the site is 700 pixels, however, if I create a <div> for the footer and set that at 700px, it for one, doesn't center, and for two it comes up looking a slightly shorter width in IE than the main table above it. In Firefox it looks perfect. Now, I tried setting the width to 100% instead, and when I do this, it looks slightly shorter in BOTH browsers...

So, what I wound up doing was instead of creating a div, I just created a table for the footer. But the interesting thing is that if I again, set the width to 700px, in both browsers it's still slightly not wide enough. But if I set the width to 703, it matches up perfectly with the table above it.

I don't mind having to do this, but I'm just really confused about it. Anyone have any ideas? Oh, and if anyone looks at the code, I have a wrapper around the whole site, which I set to 703px just in case.

Strike
11-16-2004, 07:23 PM
Without proper time to check it out, let me recommend that you use the Firefox Web Developer extension:

http://www.chrispederick.com/work/firefox/webdeveloper/

It does all sorts of awesome stuff that helps when redesigning websites. For one, you can edit the CSS of the site in a text box and watch it update AS YOU TYPE. It's pretty sweet. You can also outline block elements and display class and id details attached to each element. Definitely check it out.

Kravvitz
12-06-2004, 12:48 AM
That's because your page is being rendered in Quirks mode.

http://www.positioniseverything.net/articles/box-model.html

Use the following doctype to make it render in Standards mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
http://www.w3.org/QA/2002/04/valid-dtd-list.html

traveling
10-22-2007, 11:59 PM
I didn't use the Firefox, so I didn't understand with this sofrware. I suggest you can try Dreamweaver, I feel it very well..