Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

problem with vertical align

Status
Not open for further replies.
jemminger

jemminger

Programmer
Jun 25, 2001
3,453
US
hi all,

how come this doesn't work? in ie, i get the outer span at 100% tall, but the inner span is aligned at top. in mozilla, i get both spans just wrapped around the text. shouldn't this make the outer span 100% tall with the inner span aligned in the middle vertically?

<body>
<span style=&quot;height:100%;border:1px solid red;&quot;>
<span style=&quot;vertical-align:middle;border:1px solid blue;&quot;>middle</span>
</span>
</body>


=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
 
Sort by date Sort by votes
I know that IE has a problem with span's and reading the style attrib's correctly. not sure if this was fixed in 6 but I have adapted to using div's instead do to this and other things I've noticed.

____________________________________________________
The most important part of your thread is the subject line.
Make it clear and about the topic so we can find it later for reference. Please!! faq333-2924
onpnt2.gif
 
Upvote 0 Downvote
hmm..changing to <div> gets mozilla to make the outer <div> 100% tall, but the inner is still top-aligned.

=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
 
Upvote 0 Downvote
The vertical-align property isn't for setting the vertical alignment within the element, it's to set the vertical alignment of the element itself against the elements around it. Like for text or an <img> tag.
IMG { vertical-align: text-top }

Try this:
<div style=&quot;height:100%;border:1px solid red;&quot;>
<div style=&quot;position:absolute; top:50%;&quot;>
<div style=&quot;position:relative; top:-50%;border:1px solid blue;&quot;>middle<br>middle<br>middle<br>middle</div>
</div>
</div>


Adam
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
726
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
653
PeDa
PeDa
k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
180
k4ghg
k4ghg
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
134
CoolBreeze007
CoolBreeze007

Part and Inventory Search

Sponsor

Back
Top