All-CSS Site No. 2
Whoo-hoo! Number two means it's now a trend.
Anywho...
http://www.tandswebdesign.com/samples/kidsink/
In Firefox, there is space between the top and the image/content. The menu is up against the header no problem. But the picture should be, too.
In IE, that part is fine, but the menu is floating way over to the right, instead of up against the left.
FYI, I validated the code just to be safe, and it seems to be fine. CSS and HTML.
Maybe this is just what I get for coding two hours past my bedtime after not working on clients' web stuff for a couple of weeks.
Help, please!
Assassin posted this at 03:01 — 5th May 2005.
He has: 77 posts
Joined: Apr 2005
Replace:
#menu
{
width: 150px;
text-align: center;
position: absolute;
}
with:
#menu
{
width: 150px;
text-align: center;
position: absolute;
left: 15px;
}
set the number of pixels to taste.
and replace
#pageHeader
{
background: url('images/headerbig.png') no-repeat top;
width: 775px;
height: 124px;
float: none;
margin-bottom: 0px;
padding-bottom: 0px;
}
with:
#pageHeader
{
background: url('images/headerbig.png') no-repeat top;
width: 775px;
height: 124px;
float: none;
margin-bottom: 0px;
padding-bottom: 0px;
position: absolute;
top: 0px;
}
Again, set the number of pixels to taste.
Assassin Band Website
timjpriebe posted this at 04:48 — 5th May 2005.
He has: 2,667 posts
Joined: Dec 2004
Unfortunately, that didn't even come close to working. The page looked completely screwed up, because I have everything relatively positioned so the page can always be centered.
However, I was able to fix the menu by adding: float: left;
Any more ideas to align the content section up correctly, so the top is up against the header?
Tim
http://www.tandswebdesign.com
timjpriebe posted this at 15:35 — 7th May 2005.
He has: 2,667 posts
Joined: Dec 2004
Anyone?
teammatt3 posted this at 21:53 — 8th May 2005.
He has: 2,102 posts
Joined: Sep 2003
I can't help you, but I think it looks fine in both browsers.
timjpriebe posted this at 00:32 — 13th May 2005.
He has: 2,667 posts
Joined: Dec 2004
Finally figured out the spacing issue on the picture when I encountered it working on another site. It's a workaround, really, to solve the quirk in Firefox.
I simply put the following in the block that contained the picture:
padding-top: 1px;
Then the following in the CSS img attribute for that block:
margin-top: -1px;
Hopefully that will help someone else encountering a similar problem.
Tim
http://www.tandswebdesign.com
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.