Scrollin too far to right

**hunty** · 09:32 PM

Hey,
Im trying to have my site without the scroll,
i want the menu about 2inches or so to the left, last link being about 1inch from right side of screen?
And no scroll
Anyone know where my code is wrong?

Heres the site

http://rotate-ireland.com/mess/index.htm

This is my css:

Quote:

ul.nav {
width:100%;
text-align:right;
list-style:none;
padding-top: 3px;
}

ul.nav li {
display:inline;
text-decoration: none;
}

ul.nav li a {display: inline-block; padding: 5px 15px; text-decoration: none;} /*sets default styling for all links*/
ul.nav li a:link {color: #b2cccc; border: 1px solid transparent;}
ul.nav li a:visited {color: #CCCCCC; border: 1px solid transparent; }
ul.nav li a:hover {color: #ffffff; background: #7b0505 ;border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
ul.nav li a:active {color: #666666; background: #333333; border: 1px solid transparent;}
ul.nav li a:focus {color: #ffffff; background: #7b0505; border: 1px solid transparent;}

**cbeaudin** · 12:00 AM

HTML

HTML Code:

<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">-->
<html>
<head>
<title>Rotate - Zoo Club, Kilkenny</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#2B2E32")">

<div id='nav'>    
    
    <ul class='nav'>
        <li class="active"><a href="/music/" class=".theunderground.ie/music/events">Home</a></li>
        <li><a href="/music/competition">About</a></li>
        <li><a href="http://www.theunderground.ie/music/gallery">Events</a></li>
        <li><a href="/music/venue">Gallery</a></li>
        <li><a href="/music/map">Contact</a></li>
        <li><a href="/music/contact">Links</a></li>
    </ul>      

</div>
                    

</body>
</html>

CSS

HTML Code:

#nav {
width:100%;
text-align:right;
list-style:none;
padding-top: 3px;
}

ul.nav li {
display:inline;
text-decoration: none;
}

ul.nav li a {display: inline-block; padding: 5px 15px; text-decoration: none;} /*sets default styling for all links*/
ul.nav li a:link {color: #b2cccc; border: 1px solid transparent;}
ul.nav li a:visited {color: #CCCCCC; border: 1px solid transparent; }
ul.nav li a:hover {color: #ffffff; background: #7b0505 ;border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
ul.nav li a:active {color: #666666; background: #333333; border: 1px solid transparent;}
ul.nav li a:focus {color: #ffffff; background: #7b0505; border: 1px solid transparent;}

Not sure what the purpose for the table was so i removed it. If you need the table for some reason let me know.

**hunty** · 06:53 AM

Thanks, that was just my shoddy work.

Im still getting the hang of it

You see in link above how text has paddin frm the top, and is centred on the dark part of image?
With the new code the txt is down 2much in firefox, but not in IE!

Why is it not working in firefox?
have a look here if you can

Old:
http://rotate-ireland.com/mess/index.htm

New:
http://rotate-ireland.com/mess/2index.html

**LadynRed** · 05-17-2008, 09:42 AM

It IS working in Firefox, as usual, IE gets it WRONG, so adjust your perception. IE is the LEAST standards compliant, and tends to do many things it's own way and not the way more standards-compliant browsers like Firefox, Safari, and Opera do.

It appears you commented out the DOCTYPE declaration, you MUST have that, uncomment it ! Without that, IE operates in QUIRKS MODE - which is generally a mess.

You have a .nav class for your UL, but you have no properties for it. Add this:
ul.nav{margin: 0; padding: 0;}

That will get rid of the default margins and padding. You need to also zero out the margins and padding on <body>, and NOT use that inline 'leftmargin=0' nonsense that's in there now.

**hunty** · 05-27-2008, 01:36 PM

Quote:

Originally Posted by LadynRed

It IS working in Firefox, as usual, IE gets it WRONG, so adjust your perception. IE is the LEAST standards compliant, and tends to do many things it's own way and not the way more standards-compliant browsers like Firefox, Safari, and Opera do.

It appears you commented out the DOCTYPE declaration, you MUST have that, uncomment it ! Without that, IE operates in QUIRKS MODE - which is generally a mess.

You have a .nav class for your UL, but you have no properties for it. Add this:
ul.nav{margin: 0; padding: 0;}

That will get rid of the default margins and padding. You need to also zero out the margins and padding on <body>, and NOT use that inline 'leftmargin=0' nonsense that's in there now.

1st which exclamartion mark do i get rid off in this?

Quote:

2nd where abouts do i add? ' ul.nav{margin: 0; padding: 0;}'

**LadynRed** · 05-27-2008, 02:20 PM

Quote:

2nd where abouts do i add? ' ul.nav{margin: 0; padding: 0;}

In the CSS file

Quote:

1st which exclamartion mark do i get rid off in this?

Should just be this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

**hunty** · 04:08 PM

Was this added in correct?

Quote:

#nav {
width:100%;
text-align:right;
list-style:none;
padding-top: 0px;
}

ul.nav{margin: 0; padding: 0;}

ul.nav li {
display:inline;
text-decoration: none;
}

ul.nav li a {display: inline-block; padding: 2px 15px; text-decoration: none;} /*sets default styling for all links*/
ul.nav li a:link {color: #b2cccc; border: 1px solid transparent;}
ul.nav li a:visited {color: #CCCCCC; border: 1px solid transparent; }
ul.nav li a:hover {color: #ffffff; background: #7b0505 ;border-left:1px solid #ffffff;border-right:1px solid #ffffff;}
ul.nav li a:active {color: #666666; background: #333333; border: 1px solid transparent;}
ul.nav li a:focus {color: #ffffff; background: #7b0505; border: 1px solid transparent;}

and my html file now is

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rotate - Zoo Club, Kilkenny</title>
<link href="2style.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="header.jpg")">

<div id='nav'>

<ul class='nav'>
<li class="active"><a href="/music/">Home</a></li>
<li><a href="/music/competition">About</a></li>
<li><a href="gallery">Events</a></li>
<li><a href="/music/venue">Gallery</a></li>
<li><a href="/music/map">Contact</a></li>
<li><a href="/music/contact">Forum</a>
<li><a href="/music/contact">Links</a></li>
</ul>

</div>

</body>
</html>

</html>

How is it now?

**wynot** · 05:02 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rotate - Zoo Club, Kilkenny</title>
<link href="2style.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="header.jpg")">

<div id='nav'>

<ul class='nav'>
<li class="active"><a href="/music/" class=".music/music/events">Home</a></li>
<li><a href="/music/competition">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="/music/venue">Gallery</a></li>
<li><a href="/music/map">Contact</a></li>
<li><a href="/music/contact">Forum</a>
<li><a href="/music/contact">Links</a></li>
</ul>

</div>

</body>
</html>

</html>

**hunty** · 05-28-2008, 04:11 PM

whats that?

**hunty** · 06-05-2008, 04:06 PM

is that it fixed? whats the difference?