Webmaster Forum


Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 05-18-2007, 02:34 PM
Junior Member
 
Join Date: 04-14-07
Posts: 6
iTrader: 0 / 0%
Thumbs down Distorted buttons

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.
 
Reply With Quote
  #2 (permalink)  
Old 05-18-2007, 06:58 PM
Brian M's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 11-01-06
Location: Hawthorne FL
Posts: 447
iTrader: 0 / 0%
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?
__________________
American Acolyte.org
 
Reply With Quote
  #3 (permalink)  
Old 05-18-2007, 09:07 PM
chicgeek's Avatar
Contributing Member
 
Join Date: 08-19-04
Location: Canadian on the left coast
Posts: 14,199
iTrader: 0 / 0%
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!)
__________________
laura / chicgeek
soprano & web designer
@chicgeek on Twitter
laurakishimoto.ca
 
Reply With Quote
  #4 (permalink)  
Old 05-18-2007, 10:02 PM
Junior Member
 
Join Date: 05-18-07
Posts: 1
iTrader: 0 / 0%
Code:
#buttons{ padding-top:15px; width: 682px; height: 26px; background-color: #1e1e1e; }
 
Reply With Quote
  #5 (permalink)  
Old 05-19-2007, 04:24 AM
Junior Member
 
Join Date: 04-14-07
Posts: 6
iTrader: 0 / 0%
Quote:
Originally Posted by floridave View Post
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/
 
Reply With Quote
  #6 (permalink)  
Old 05-19-2007, 07:27 AM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,030
iTrader: 3 / 100%
Thumbs down Small changes

Hi!

This was your initial html code:
Quote:
<div id="banner">
<a href="http://www.sythix.co.uk/working/index.html">
<img id="logo" height="52" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_02.gif"
width="154" border="0"></a><a href="http://ww.sythix.co.uk/blog/"><img height="52"
alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_03.gif" width="140"
border="0"></a>
<img height="10" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_04.gif"
width="682">
</div>
<div id="buttons">
<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><a href="http://www.sythix.co.uk/working/media.html"><img
id="media" height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_08.gif"
width="80" border="0"></a><a href="http://www.sythix.co.uk/working/about.html"><img
id="about" height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_10.gif"
width="80" border="0"></a><a href="http://www.sythix.co.uk/blog/"><img id="blog"
height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_12.gif"
width="80" border="0" name="blog"></a><a href="http://www.sythix.co.uk/working/contact.php"><img
id="contact" height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_14.gif"
width="80" border="0"></a></div>
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:
<div id="banner">
<a href="http://www.sythix.co.uk/working/index.html">
<img id="logo" height="52" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_02.gif"
width="154" border="0"></a><a href="http://ww.sythix.co.uk/blog/"><img height="52"
alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_03.gif" width="140"
border="0"></a>
</div>
<div id="buttons">
<img height="10" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_04.gif"
width="682"><br />

<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><a href="http://www.sythix.co.uk/working/media.html"><img
id="media" height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_08.gif"
width="80" border="0"></a><a href="http://www.sythix.co.uk/working/about.html"><img
id="about" height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_10.gif"
width="80" border="0"></a><a href="http://www.sythix.co.uk/blog/"><img id="blog"
height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_12.gif"
width="80" border="0" name="blog"></a><a href="http://www.sythix.co.uk/working/contact.php"><img
id="contact" height="26" alt="" src="Sythix%20Web%20%20Aaron%20Thomas_files/sythix_14.gif"
width="80" border="0"></a></div>

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
 
Reply With Quote
  #7 (permalink)  
Old 05-19-2007, 03:37 PM
Junior Member
 
Join Date: 04-14-07
Posts: 6
iTrader: 0 / 0%
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.
 
Reply With Quote
  #8 (permalink)  
Old 05-19-2007, 04:20 PM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,030
iTrader: 3 / 100%
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:
<ul>
<li><a href="#">Home</a></li>
</ul>
and set the background image to the li itself and a padding-left of 5px maybe.
 
Reply With Quote
  #9 (permalink)  
Old 05-20-2007, 02:43 AM
Junior Member
 
Join Date: 04-14-07
Posts: 6
iTrader: 0 / 0%
Quote:
Originally Posted by costin_trifan View Post
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.
 
Reply With Quote
  #10 (permalink)  
Old 05-20-2007, 06:20 AM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,030
iTrader: 3 / 100%
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...
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
next buttons ball420 Coding Forum 8 03-21-2007 12:13 PM
Click Here Buttons John Scott Marketing Forum 33 07-25-2006 11:18 AM
IE Buttons Calisonder Coding Forum 2 12-02-2005 12:42 PM
Do My Buttons Work For You? Jason Web Usability 5 05-01-2005 08:50 AM
Buttons ... Atom Graphic Design Forum 7 12-01-2003 03:24 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 03:06 AM.
Powered by vBulletin
Copyright © 2000-2013 Jelsoft Enterprises Limited.
Copyright © 2003 - 2013 Escalate Media LP




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.