/    Sign up×
Community /Pin to ProfileBookmark

Setting the height of my div

Copy linkTweet thisAlerts:
Jan 05.2006

I was asked to build a website for a local company. Due to the fact I hadn’t messed around with HTML for many years and was not aware of current technologies, I coded the site in HTML 4 Transitional.

Now having the site design/layout as I and the customer would like, I’m now attempting to convert the template to XTHML 1.0 Strict. I usually use FF when I surf the internet and wasn’t aware of the large differences that existed between IE 6 and FF 1.5. I’ve had a bit of trouble getting the code to work on both browsers as expected.

In particular, I have a div, and I’d like to set its height to 10px. I have used the ‘height: 10px’ command, but it will not work in IE; it does however work in FF. Is it perhaps that I don’t have any text between the div tags? I don’t plan on putting any inside. This is the BLUE div located underneath the links div.

Furthermore, in the div that has the links situated inside, I can’t get the links to vertically align to the center in FF. I might be overlooking something here though.

The code is located here: [URL=http://www.bobbininternational.com/about.html]Bobbin International – About Us[/URL]

Please note that the top instance is the new XHTML code i’m trying to get to work, and the bottom instance is the old HTML 4 code. Don’t pay attention to the black border.

Any tips/pointers would be much appreciated….

Regards,

Gavin

to post a comment
HTML

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Jan 05.2006 — It didn't appear collapsed to me in either Fx1 or IE6.
Copy linkTweet thisAlerts:
@gcs584authorJan 05.2006 — Hi Ray,

Thanks for your help! I should have elaborated more. It's not that its "collapsed", the problem is that the area has a height larger than 10px in IE, and it wont let me change the height down to 10px. If you notice in the FF browser, the blue div's height is smaller (and correct at 10px) compared with IE. It seems that the height is adjusted in IE so that a piece of text can fit in.

Regards,

GCS584
Copy linkTweet thisAlerts:
@ray326Jan 05.2006 — In the style for the div try setting [B]font-size:1px;[/B] and see if that helps.
Copy linkTweet thisAlerts:
@gcs584authorJan 05.2006 — Worked! Thanks ray. I thought I had already tried that, but I probably and mistakingly put it in the wrong div.

Thanks again,

GCS584
Copy linkTweet thisAlerts:
@gcs584authorJan 06.2006 — Well, Ray helped me out a great deal last night, and today I attempted to finish converting the template from HTML 4.0 transitonal to XHTML 1.0 Strict.

My problem is again with IE. When I use the CSS border properties on a 'div' code, it actually removes some of the height of the div and uses it for the border thickness.

For example:

[code=html]
div.footerbarSection
{
border-style: solid;
border-color: #FFFFFF;
border-width:0px 0px 2px 0px;
background-color: #336699;
width: 773px;
margin: 0;
padding: 0;
font-size:1px;
height: 10px;
float: left;
}
[/code]

All this does is creates a div with a blue background and uses a white bottom border to create a spacer. But since the bottom border is 2 pixels thick and the height of the div is 10 pixels, it subtracts 2 pixels from the div (because of the border) and makes the div only 8 pixels in height. What I want is a bar that is 10 pixels thick and a bottom border that is 2 pixels thick. Note, I only have this problem in IE. I'm having a similar situation with 2 other vertical bars.

You can check the page out [URL=http://www.geocities.com/gcs584/template.htm]here[/URL]. I have described where the problems are occuring.

Any help would be much appreciated,

Regards,

GCS584
Copy linkTweet thisAlerts:
@ray326Jan 07.2006 — Try the !important hack. The first line is for real browsers, the second for IE.

height:10px !important;

height: 8px;
Copy linkTweet thisAlerts:
@gcs584authorJan 07.2006 — Thanks Ray, it worked! The bottom line is IE is ugly! Would it be possible that somebody compare the page in Safari with FF? Finally, is there a rating system on the forums? Thanks for the help again.

Regards,

GCS584
Copy linkTweet thisAlerts:
@ray326Jan 07.2006 — Finally, is there a rating system on the forums?[/QUOTE]For rating the forums or for site evaluation? There's a forum for the latter.
×

Success!

Help @gcs584 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...