Forum Moderators: not2easy
I am trying to display 3 div tags inline at the top of my page in order to have a "community server" style login "Tab" at the top of my page.
I have created
<div id="tab-container">
<div id="inner-tab-left">div>
<div id="inner-tab"><a href="#">Login</a> ¦ <a href="#">Register</a> ¦ <a href="#">Help?</a></div>
<div id="inner-tab-right"><div>
</div>
and then
#tab-container{height:40px}
#inner-tab-left{display:inline;height:40px;width:23px}
#inner-tab{display:inline;height:40px;}
#inner-tab-right{display:inline;height:40px;width:23px}
but that doesnt seem to be working. does anyone have any suggestions?
<div id="tab-container">
<div id="inner-tab-left"><img src="App_Themes/Default/Images/tab_left.png" /></div><div id="inner-tab"><a href="#">Login</a> ¦ <a href="#">Register</a> ¦ <a href="#">Help?</a></div><div id="inner-tab-right"><img src="App_Themes/Default/Images/tab_right.png" /></div>
</div>
could that be because of DocType or something?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
#tab-container
{
float: right;
}
#inner-tab-left
{
display: inline;
}
#inner-tab
{
background-image: url(Images/tab_repeat.png);
background-repeat: repeat-x;
vertical-align: top;
display: inline;
padding-bottom:25px;
}
#inner-tab-right
{
display: inline;
}
a
{
margin: 0px;
padding: 0px;
vertical-align:top;
color:#0066cc;
}
*** [i]I had to "hack" it a bit for FF and Safari /i] ***
Less pain occurs when you design for Mozilla/Opera/Safari and then tweak for IE.
Background info: WW has some groups that are anti-xhtml. A lot of us like xhtml and use it all the time. For this forum I think it's best to assume to use what you like best, and let's keep the xhtml vs. html4 discussions in their appropriate forum (i.e. not here).
I would however agree strongly with the recommendation to start in total disregard of IE and make it work there last (using conditional comments). It'll be a far less uphill battle if you do.
What DocType is recommended? And where can I find resources on the differences?
Right here [webmasterworld.com]
