SWG Posted October 5, 2005 Share Posted October 5, 2005 Hi.I'm trying to make a menu using <DIV> and stylesheets and have a problem removing the space bewteen the DIVs. I've put a top border on the content DIV and a bottom border on the titlebar DIV (green and red) to encase the space I'm talking about. When viewing the page in IE there is only the single space, but when viewing it in Firefox there is an additional space above the titlebar DIV, I'd like to remove both if possible. If you have any suggestions, help or another way of doing it, I'd appreciate it. <html><head><title>:: My startpage ::</title><style type="text/css"> body { background-color:#000; } .menu { position:absolute; top:10; left:10; width:20%; color:#000; background-color:#EEF; margin:1px; border:1px solid #fff; font-family:verdana; } .title_bar { background:url(title_bar.gif) repeat-x; border-bottom:10px solid #f00; color:#333; font-size:1.0em; font-weight:bold; font-variant:SMALL-CAPS; padding:3px 3px 3px 3px; } .content { background-color:#DDF; border-top:10px solid #0f0; padding:5px 5px 5px 5px; } .link { font-size:.8em; color:#333; text-decoration:none; } a:hover { color:#888; }</style></head><body><div class="menu"> <div> <h2 class="title_bar">News</h2> </div> <div class="content"> <a class="link" href="http://www.bt.dk">BT.dk</a><br> <a class="link" href="http://www.eb.dk">Ekstra Bladet</a> </div></div></body></html> Link to comment Share on other sites More sharing options...
actionsketch Posted October 5, 2005 Share Posted October 5, 2005 Try setting the margins in the titlebar and content to 0px. Also, it seems pointless to have: <div> <h2 class="title_bar"> News </h2></div> when you could either just have <h2 class="title_bar"> News</h2> or <div class="title_bar"> News</div> Link to comment Share on other sites More sharing options...
Philosopher's Ghost Posted October 5, 2005 Share Posted October 5, 2005 You may want to consider using <span></span> instead of <div></div> tags. Most browsers will give you extra whitespace (and newlines. *grumble*) around DIV tags, while they don't around SPAN tags... Link to comment Share on other sites More sharing options...
F-Man Posted October 5, 2005 Share Posted October 5, 2005 div: block-level element.span: in-line element.=) Link to comment Share on other sites More sharing options...
SWG Posted October 6, 2005 Author Share Posted October 6, 2005 Thanks for the help guys.Setting the margin to 0px helped.Thanks for the tips in regards to DIV and SPAN, I'll have to read up on both since I'm not that experienced with either (could you tell? ;-) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now