6 replies [Last post]
plusonetwo
Offline
newbie
Houston, Texas
Last seen: 17 years 3 weeks ago
Houston, Texas
Joined: 2003-06-15
Posts: 3
Points: 0

I'm fairly new to building a site with CSS and a (mostly) tableless design but, no suprise, I'm having a problem.

I'd like to have a 9px high rule or box... or border... just as long as it's 9px in height and so and so wide. Mozilla and Netscape render a 9px box just fine but IE6 bloats the thing up to 12px and then higher depending on what method I use, box or border.

I'm at a loss as to what to do now. Your thougths?

Thanks,

- Michael

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

rule

Hi Michael,
Have you checked that you are using a valid doctype :?:

Can you post a link to the page so we can have a look.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 23 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Borders, boxes and rules

If there is a single space in the HTML, IE will put that space in at the given font size - in this case, 12pt. Two things you can do:

1. Make sure there are no spaces in the HTML between the start and the end of the box.
2. Declare the box to have a different font-size (like 1pt or something silly).

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

plusonetwo
Offline
newbie
Houston, Texas
Last seen: 17 years 3 weeks ago
Houston, Texas
Joined: 2003-06-15
Posts: 3
Points: 0

Borders, boxes and rules

dJomp,

How absolutely inane to have to set the font size to 1pt but I tried it, and, sure enough... IT WORKED!!! I have a 9px box. It just makes me laugh at how ridiculous that fix is. I'd never have thought of doing that. Is this one of those things that we have to chalk up to a hack?

So, for edification of others...

#accent {
	width: 450px;
	height: 9px;
	background-color: #f00;
	font-size: 1px;
	}

Still laughing... anyhow, thank you all for your suggestions. As I continue to slog through building pages, I'm sure I'll be back.

Thanks,

- Michael

plusonetwo
Offline
newbie
Houston, Texas
Last seen: 17 years 3 weeks ago
Houston, Texas
Joined: 2003-06-15
Posts: 3
Points: 0

Borders, boxes and rules

I have a follow-up to my previous post.

Upon trying to also make a 1px high line/rule, I used the following:

#accent {
	border-top: 1px solid #ccc;
	width: 450px;
	padding: 0;
	margin: 0;
	}

Unfortunately, in IE6, this had the effect of adding 12px of space below the line. NOT what I wanted. Oddly enough, I took away the width: 450px and the 12px of space below it disappeared and everything looks fine.

However, the only reason the line reaches the proper width without a specific width descriptor is because it itself is contained within a 450 div. I'd feel more comfortable actually setting a width value for the line, but since it works this way, I'll not complain too loudly.

- Michael

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 23 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Borders, boxes and rules

plusonetwo wrote:
Is this one of those things that we have to chalk up to a hack?

Nah, just another example of how strange IE can be ](*,)

Same thing in your second example. Set font-size to 1 (or even 0!) and it'll do it fine. Weird it only adds the space when you set a width...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

kcstock
Offline
newbie
Detroit
Last seen: 15 years 23 weeks ago
Detroit
Timezone: GMT-5
Joined: 2005-01-24
Posts: 1
Points: 0

Just a thankyou

I just found this solution! THANK YOU!

I fixed a heap of problems i was having in my layout.

I tend to use div's as design elements and I set a BG image to them using css. Well since they are BG images I need to define the size of the the actual div box. I was getting extra space due to IE needing to add an invisible line of text to that div. (at least that is how i am explaining it in my head) Adding thsi attribut to any CSS definitions that only contained BG images and no content fixed ALL of my spaing issues.

THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!