Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login



Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

Reply
Images overlapping the text etc.
Old 08-08-2006, 09:31 AM Images overlapping the text etc.
Average Talker

Posts: 23
Name: Chris
Trades: 0
I have just inserted new buttons on to my website, but they are too long for the template as they overlap other things. I do not want to make the buttons smaller, instead i want to move them left so they will not overlap any more. I don't know how to move the buttons though...please help.

The Site

*EDIT* - Just noticed it appears differently in Firefox than IE! In Firefox it overlaps, but in IE it moves the text box to the bottom of the page. I still want to know how to move the buttons left...

Last edited by Chrisy; 08-08-2006 at 09:35 AM..
Chrisy is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 08-08-2006, 03:26 PM Re: Images overlapping the text etc.
vangogh's Avatar
Post Impressionist

Latest Blog Post:
Why Responsive Design?
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
The issue with the spacing is that IE and Firefox use different things on the list <ul> to add that indentation. You have the margin set to 0, but to get the list looking the same in both you'll also need to make the padding 0 for the <ul>. That will clear the defaults for each browser and get them in synch.

Whenever you work with lists it's usually a good idea to set both margin and padding to 0 right away and then add back to either one if you need. Setting both to 0 gets IE and Firefox to agree.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 08-08-2006, 03:46 PM Re: Images overlapping the text etc.
Average Talker

Posts: 23
Name: Chris
Trades: 0
Okay, i'm still slightly confused...i know - i'm such a n00b. Anyway...here is my menu CSS coding...what do i need to do?


#main
{
padding-top: 20px;
position: relative;
width: 680px;
margin: 0px auto;
padding-bottom: 10px;
}
Chrisy is offline
Reply With Quote
View Public Profile
 
Old 08-09-2006, 03:38 AM Re: Images overlapping the text etc.
vangogh's Avatar
Post Impressionist

Latest Blog Post:
Why Responsive Design?
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
I actually took a closer look and the problem is with this code:

#menu a
{
display: block;
position: relative;
width: 168px;
height: 27px;
margin-bottom: 1px;
text-decoration: none;
background: inherit;
background-image: url('images/bbg0.gif');
padding-left: 17px;
padding-top: 11px;
color: #FFF;
text-transform: lowercase;
font-size: 13px;
}

The reason the images are moved to the right is because of the code above that says padding-left:17px. If you remove that line of code or set padding-left:0 instead the images will move to the left like you want.

Try that and see if it works like you want and let me know.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 08-10-2006, 05:34 AM Re: Images overlapping the text etc.
Average Talker

Posts: 23
Name: Chris
Trades: 0
That worked a treat, thanks a lot mate!! I'll add to your talkupation for that one !
Chrisy is offline
Reply With Quote
View Public Profile
 
Old 08-10-2006, 02:15 PM Re: Images overlapping the text etc.
vangogh's Avatar
Post Impressionist

Latest Blog Post:
Why Responsive Design?
Posts: 10,815
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
Glad to help and thanks for any TP you send my way.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Reply     « Reply to Images overlapping the text etc.
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.61272 seconds with 12 queries