Distorted buttons

Sythix · Share | #1 (**permalink**) 05-18-2007, 02:34 PM

Hey people.

I've been working more on my website, and improved upon the feedback you gave me a couple of months back.

But now I've got another problem

I've remade the site, with divs rather than tables, and I've been very pleased with the way everythings worked up until now. The buttons at the top of the page have somehow moved slightly and overlapped with the part above it:

http://www.sythix.co.uk/working/

The buttons should look like this:

http://www.sythix.co.uk/uploads/buttons.jpg

What's gone wrong?

If you need to know any other info such as code etc, let me know.

Thanks,

Aaron.

Brian M · #2 (**permalink**) 05-18-2007, 06:58 PM

Hello. I visited your site and checked it against your pic. It looks excactly like your picture. I see nothing wrong with it. I am using IE 6. Perhaps its the browser you are using?

chicgeek · #3 (**permalink**) 05-18-2007, 09:07 PM

FF. The images are not contained in the wrap box.
I'll try to find 10 minutes tomorrow to look at your code, too tired now.

(Remind me, if I do not!)

floridave · #4 (**permalink**) 05-18-2007, 10:02 PM

Code:

#buttons{
padding-top:15px;
width: 682px;
height: 26px;
background-color: #1e1e1e;
}

Sythix · #5 (**permalink**) 05-19-2007, 04:24 AM

Quote:

Originally Posted by floridave

Code:

#buttons{
padding-top:15px;
width: 682px;
height: 26px;
background-color: #1e1e1e;
}

That fixes the problem in FF, but makes the gap too big in IE...
I've updated it now and fixed a couple of other errors. It looks fine in FF, but the buttons are wrong in IE.

http://www.sythix.co.uk/working/

kos · #6 (**permalink**) 05-19-2007, 07:27 AM

Hi!

This was your initial html code:

Quote:

The initial CSS styles:

Quote:

#buttons {
WIDTH: 682px; PADDING-TOP: 10px; HEIGHT: 26px; BACKGROUND-COLOR: #1e1e1e;
}
#home {
MARGIN-LEFT: 8px; MARGIN-RIGHT: 68px;
}
#about {
MARGIN-LEFT: 66px; MARGIN-RIGHT: 70px
}
#contact {
MARGIN-LEFT: 63px; MARGIN-RIGHT: 7px
}

I've made a few changes, and in my IE7 and FF it looks ok.

Changes to HTML :

Quote:

Changes to CSS:

Quote:

#buttons {
WIDTH: 682px; PADDING-TOP: 10px; HEIGHT: 26px; BACKGROUND-COLOR: #1e1e1e; height: auto; vertical-align: middle;
}
#home, #media, #about, #blog, #contact {
margin: 1px 68px 0px 8px; /* T R B L */
}

HTH

Sythix · #7 (**permalink**) 05-19-2007, 03:37 PM

Brilliant, thanks tha worked great

.

Just one last (or at least I hope) problem. the links on the buttons seem to 'leak' away from the button itself. try hovering over a blank space to the side of a button, and it'll seem to be a link.

Again, this problem only occurs in FF.

Thanks,

Aaron.

kos · #8 (**permalink**) 05-19-2007, 04:20 PM

I believe that's because you have this construction:

Quote:

<a href="http://www.sythix.co.uk/working/index.html">
<img id="home" height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_06.gif"
width="80" border="0" name="home"></a>

and maybe FF has a problem with the margin attribute, I'm not sure though...

I suggest you can try this structure:

Quote:

and set the background image to the li itself and a padding-left of 5px maybe.

Sythix · #9 (**permalink**) 05-20-2007, 02:43 AM

Quote:

Originally Posted by costin_trifan

I believe that's because you have this construction:

and maybe FF has a problem with the margin attribute, I'm not sure though...

I suggest you can try this structure:

and set the background image to the li itself and a padding-left of 5px maybe.

I've tried this, but from what it seems, I can't add a background image to a li.

kos · #10 (**permalink**) 05-20-2007, 06:20 AM

CSS:

Quote:

UL.MenuList {
display: inline;
list-style-type: none;
margin: 0px 0px 0px 0px; /* T R B L */
}
UL.MenuList LI.MenuListItem {
display: inline;
background-image: url('App_Images/MenuItemImage.gif');
background-position: center left !important;
background-repeat: no-repeat !important;
padding-left: 15px !important;
list-style-type: none;
font-family: Georgia, Times New Roman, Serif;
font-size: 10pt;
color: #000000;
margin: 0px 10px 0px 10px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}

HTML:

Quote:

<ul class="MenuList">
<li class="MenuListItem">Home</li>
<li class="MenuListItem">About</li>
<li class="MenuListItem">Contact</li>
</ul>

Simple as that...