White space (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Itsme8 -> White space (9/17/2006 14:56:10)

Hello,

I have a little problem with the white space on my site.

This is the site code:
quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Validating drop down cross-browser menu</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML, w3c, opacity, box model, mozilla, opera, netscape, internet explorer, techniques, layout, three column, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations, photo, photograph, gallery, slide, slideshow, picture, dropdown, pull up, fly out" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="dropdown.css">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="dropdown_ie.css">
<![endif]-->

<base target="main">

</head>

<body>

<p><img border="0" src="images/PTRCommunity.jpg" width="100%" height="150"></p>

<div id="wrapper">
<div id="info">

<div class="menu">

<ul>
<li><a class="hide" href="bottom.htm">HOME</a>

<!--[if lte IE 6]>
<a href="bottom.htm">HOME
</a>
<![endif]-->

</li>

<li><a class="hide" href="information.asp?Subject=Information">INFORMATION</a>

<!--[if lte IE 6]>
<a href="information.asp?Subject=Information">INFORMATION
<table><tr><td>
<![endif]-->

<ul>
<li><a title="EARNING OPTIONS" href="information.asp?Subject=Information&SubSubject=Earning options">Earning options</a></li>
<li><a title="PAYMENTS" href="information.asp?Subject=Information&SubSubject=Payments">Payments</a></li>
<li><a title="SIGN-UP" href="information.asp?Subject=Information&SubSubject=Sign-up">Sign-up</a></li>
</ul>

<!--[if lte IE 6]>
</table></tr></td>
</a>
<![endif]-->

</li>

<li><a class="hide" href="information.asp?Subject=Doīs&Subject=Donīts">DO'S & DON'TS</a>

<!--[if lte IE 6]>
<a href="information.asp?Subject=Doīs&Subject=Donīts">DO'S & DON'TS
<table><tr><td>
<![endif]-->

<ul>
<li><a title="DO`S" href="information.asp?Subject=Do's">Do's</a></li>
<li><a title="DONīTS" href="information.asp?Subject=Don'ts">Don'ts</a></li>
</a></li>
</ul>

<!--[if lte IE 6]>
</table></tr></td>
</a>
<![endif]-->

</li>

<li><a class="hide" href="PTRs.htm">PTR'S</a>

<!--[if lte IE 6]>
<a href="PTRs.htm">PTR'S
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">
Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed
2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed
3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed
4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">
minimum width</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="login.asp">MEMBERS</a>

<!--[if lte IE 6]>
<a href="login.asp">MEMBERS
</a>
<![endif]-->

</li>

<li><a class="hide" href="signup.asp">SIGN-UP</a>

<!--[if lte IE 6]>
<a href="signup.asp">SIGN-UP
</a>
<![endif]-->

</li>

<li><a class="hide" href="forum.htm">FORUM</a>

<!--[if lte IE 6]>
<a href="forum.htm">FORUM
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="search.htm">SEARCH</a>

<!--[if lte IE 6]>
<a href="search.htm">SEARCH
</a>
<![endif]-->

</li>

<li><a class="hide" href="contact.htm">CONTACT</a>

<!--[if lte IE 6]>
<a href="contact.htm">CONTACT
</a>
<![endif]-->

</li>
</ul>

</div>


</div>

</div>
</body>
</html>


http://ptrcommunity.sohosted.com/top.htm

And this is the is the css for non ie users.

quote:

/* common styling */
.menu {font-family: arial, sans-serif; width:1200px; position:relative; font-size:11px; z-index:100;margin-left:0; margin-right:0; margin-top:2px; margin-bottom:100px; }
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:100px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#40ADE2; line-height:20px; font-size:11px; overflow:hidden; margin-top:0}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:100px}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:100px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-100px;}


How can I remove the white space between the image and menu?



Nicole -> RE: White space (9/17/2006 17:07:23)

Hi Renee,

Try removing the margin-bottom: 100px from the .menu.

If you haven't already got it, download the Firefox web developer toolbar. On that you'll see under the CSS ooption "edit CSS" which is very useful for working out little annoyances like this.

Nicole

p.s. You may want to change the title of your site?



caz -> RE: White space (9/17/2006 17:40:56)

You need to reorder your html like this 

<body>


<div id="wrapper">
<div id="info">
<img border="0" src="PTRCommunity.jpg" width="100%" height="150">
</div>

<div class="menu">
...


You also need to attend to your head section, 

<title> Stu Nicholls | CSSplay | Validating drop down cross-browser menu</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML, w3c, opacity, box model, mozilla, opera, netscape, internet explorer, techniques, layout, three column, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations, photo, photograph, gallery, slide, slideshow, picture, dropdown, pull up, fly out" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />


I am sure that Stu would be delighted that you are learning about CSS by using CSSplay, but using his title etc won't do your site much good. [;)]



jaybee -> RE: White space (9/17/2006 19:09:55)

I don't think you're meant to grab the entire page, just the css and code that goes with whatever he's demonstrating.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875