By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,092 Members | 1,546 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,092 IT Pros & Developers. It's quick & easy.

Div Won't Size Correctly

P: n/a
What might cause a div to refuse to go to the width that I have tried to
set for it?

See #mainBody and .box

Here are the styles and the html below:

body, #container {
padding: 10px 10px 0px 10px;
}

#container {
border: 1px solid #230;
}

#container {
border-color: #ccc;
text-align: center;
}

#mainBody {
height: 500px;
width: 100%; // won't size
vertical-align: middle;
text-align: center;
margin: 20px 0px 0px 0px;
padding: 25px 0px 0px 0px;
}

..box {
height: 400px;
width: 300px; // won't size
border: solid 2px #230;
text-align: center;
margin: 0px 10px 0px 10px;
padding: 20px;
background-color: #ccc;
}

#playerOne, #playerTwo {
height: 390px;
cursor: pointer;
cursor: hand;
}

#nameBoxOne, #nameBoxTwo {
margin: 0px 75px 25px 150px;
font: 16pt/16pt Monotype Corsiva, Garamond;
}

<body scroll="yes" onload=loadImages();>
<div id="container">
<img src="/" alt="" class="ad" name="" />
<img src="/" alt="" class="identity" name="" />
<img src="/" alt="" class="ad" name="" />

<!-- This div should have a width of 100% -->
<div id="mainBody">

<!-- These two boxes should have the same width (the height is okay)
<span class="box">
<img id="playerOne" onClick='sWinner(sPlay1, iWhere);' />
</span>
<span class="box">
<img id="playerTwo" onClick='sWinner(sPlay2, iWhere);' />
</span>
</div>
<span id="nameBoxOne"></span>
<span id="nameBoxTwo"></span>
</div>
</body></html>

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Heath <hj******@email.moc> wrote:
What might cause a div to refuse to go to the width that I have tried to
set for it?

See #mainBody and .box
#mainBody is sized to 100% (minus the padding on body and #container)
body, #container {
padding: 10px 10px 0px 10px;
}

#mainBody {
height: 500px;
width: 100%; // won't size
// is not a CSS comment. /* comment */ is the correct syntax. It's not
surprising that some browsers may get confused by your styles when you
have stuff in there that they can't possibly understand.
.box {
height: 400px;
width: 300px; // won't size
Same problem as above.

The two elements with class .box are spans not divs, spans are inline
elements and you can't use the width property on a non-replaced inline
element. Some browsers may choose to apply the width (especially if
you trigger quirks mode) but you shouldn't try to set a width on a
span.
#playerOne, #playerTwo {
height: 390px;
}


Here's another problem, some browsers such as IE will set the width of
these images to 390px. If you set one of height or width on an image,
via either HTML or CSS but leave the other one undefined then IE (and
maybe other browsers?) will set both values to the one specified.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
>> height: 500px;
width: 100%; // won't size

// is not a CSS comment. /* comment */ is the correct syntax. It's not
surprising that some browsers may get confused by your styles when you
have stuff in there that they can't possibly understand.


Sorry, mixed up with javascript, I only did that for posting it here, it
isn't in my actual css. Good reminder though
.box {
height: 400px;
width: 300px; // won't size

Same problem as above.

The two elements with class .box are spans not divs, spans are inline
elements and you can't use the width property on a non-replaced inline
element. Some browsers may choose to apply the width (especially if
you trigger quirks mode) but you shouldn't try to set a width on a
span.


This must be the problem. Thanks for that one, it was really bothering me.

Jul 20 '05 #3

P: n/a
It seems "Heath" wrote in comp.infosystems.www.authoring.stylesheets
in article <40***********************@news.skynet.be>:
Sorry, mixed up with javascript, I only did that for posting it here, it
isn't in my actual css.


Which is why we all yell for an actual URL and not snippets of code.

(When you follow up on an article, please use proper attributions.)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.