Welcome to WebmasterWorld Guest from 54.146.180.94

Forum Moderators: not2easy

MARGIN:AUTO is not centering and making page WIDER!

Please help me!

   
7:34 pm on Jun 23, 2013 (gmt 0)



Hi, everyone! I am designing a website in WordPress with the Thematic framework. I am having an issue that has not occurred before when using this theme for other sites that I created.

The div DOES NOT center. If I use margin:auto, it moves away from the left but also adds space to the right side, which makes the web page WIDER. This is obviously not the look that I am going for. If I don't use margin: auto, it is left justified. I did the code validation and worked through it. Nothing really jumped out as the reason. I used Firebug and nothing works. Could a fresh and more experienced set of eyes take a look and suggest a way (or ways) to fix this?

www.example.com/woofums

Thanks!

[edited by: bill at 8:01 am (utc) on Jun 24, 2013]
[edit reason] No links to examples or your sites as per TOS [/edit]

8:49 pm on Jun 23, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



:: detour to site, quick, before link is deleted ::

Ouch. You've got five external stylesheets, wads of separate CSS declarations-- including at least one in the <body>-- AND inline styles. Get that all cleaned up and organized, and you may well find that the problems fix themselves.

:: further detour to Web Inspector, followed by downloading page and fine-tooth-combing CSS ::

Well. That's an hour of my life I'll never see again.

At first glance, the problem seemed to be in the social-media icons. Comment them out and the problem goes away. Leave them in, and the social-media bar behaves as if it were set for position: relative with a substantial left-offset.

But the real problem is
ul.xoxo {
position: relative;
top: -50px;
right: -400px;
}

The problem only manifests itself if the ul has visible content-- here, the icons.

Yes, OK, so I was mistaken. Not a left offset but a negative right offset.

In short: The page is doing exactly what you've told it to do ;)


Incidentally, the main image is way too big. Filesize, not physical dimensions. You can easily get it down to 100k by changing to a lightly compressed jpg. The png format doesn't generally work well with subtle color gradations.
9:31 pm on Jun 23, 2013 (gmt 0)



Wow, thanks so much! I just now have to figure out how to get the icons to position properly without messing up the layout.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month