8 replies [Last post]
Pinago
Pinago's picture
Offline
Regular
Last seen: 10 years 15 weeks ago
Timezone: GMT-4
Joined: 2010-02-18
Posts: 49
Points: 66

I have some site alignment issues that I think are related to padding, but I can't see where to change to make it work right.

-the footer is pushed down, which is because my above divs are showing as if my padding or divs inside that parent div are too big... not sure why that is happening? I can position the footer with relative positioning but I'd rather fix the problem of the divs blowing down if possible.

-the unordered list of products in the left column is indented too far to the right. I can't see where the padding or what setting might be pushing those li's to the right...

Also, does anyone know how to align an li to lineup middle of the images next to them, as I have in the "It's Easy" area?

This is the site link:
signartonline

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: -the unordered list of

Quote:

-the unordered list of products in the left column is indented too far to the right. I can't see where the padding or what setting might be pushing those li's to the right...

Puzzled it's padding - as you mention! Have you tried removing, variously, padding and margin? There are only two elements to experiment with Smile

Quote:

Also, does anyone know how to align an li to lineup middle of the images next to them, as I have in the "It's Easy" area?

Firstly if it's a numbered set of steps use a OL list rather than UL
Secondly bullet graphics are generally placed as backgrounds to the LI element then you can use the background position offsets to set the vertical placement to 50%

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 1 year 35 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Pinago wrote: -the footer is

Pinago wrote:

-the footer is pushed down, which is because my above divs are showing as if my padding or divs inside that parent div are too big... not sure why that is happening? I can position the footer with relative positioning but I'd rather fix the problem of the divs blowing down if possible.

Have you adjusted the width and height of the content div relative to the size of your padding? if you have a massive padding-bottom: 300px; then you will need to change the height of your div down minus 300px, unless of course your div does not have a height value.

Also double check the padding-top and margin-top of your footer.

Luke.

Pinago
Pinago's picture
Offline
Regular
Last seen: 10 years 15 weeks ago
Timezone: GMT-4
Joined: 2010-02-18
Posts: 49
Points: 66

Thanks

I will check over things some more and try the OL. Thanks!

Pinago
Pinago's picture
Offline
Regular
Last seen: 10 years 15 weeks ago
Timezone: GMT-4
Joined: 2010-02-18
Posts: 49
Points: 66

padding?

Hi, I don't see "padding-bottom:300px;" in my styles anywhere. Where did you see that, were you just using that as an example or are you referring to the total padding bottom? Thanks!

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 1 year 35 weeks ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Pinago wrote: Hi, I don't see

Pinago wrote:

Hi, I don't see "padding-bottom:300px;" in my styles anywhere. Where did you see that, were you just using that as an example or are you referring to the total padding bottom? Thanks!

That was just an example, I don't think you supplied us with your CSS?.. if you can post your html and css here that would be useful.

Luke.

Pinago
Pinago's picture
Offline
Regular
Last seen: 10 years 15 weeks ago
Timezone: GMT-4
Joined: 2010-02-18
Posts: 49
Points: 66

site link

sorry, the I thought the css and html were visible in the link to the actual site that I had included. the site link is: Sign art online Thanks

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 30 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Pinago wrote: sorry, the I

Pinago wrote:

sorry, the I thought the css and html were visible in the link to the actual site that I had included.

Well, you did give the link in your original post and that is indeed all we need to see your html and your css. But occasionally everyone misses something.

You should be using a STRICT document type, not a transitional one. We've explained why lots of time so I won't repeat that here, being lazy. Even with the transitional doctype the validator flags an unclose P element you should fix - unclosed elements are dangerous when you are writing xhtml, although it probably won't cause a problem in most browsers.

Also the CSS validator flags some problems with your CSS. These might be intentional CSS3 rules which the validator may flag, but if so you should be careful and know why you are doing this. I believe IE just can't handle CSS3 at present, for one thing.

I suggest you switch to a strict document type, fully validate the html to that doctype, and fix those CSS errors unless they were intended.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Pinago
Pinago's picture
Offline
Regular
Last seen: 10 years 15 weeks ago
Timezone: GMT-4
Joined: 2010-02-18
Posts: 49
Points: 66

thanks

Ed, I'm working through those changes now. The css3 was intentional. Thanks