WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Problem with 100% width- divs and in Firefox;

Reply
  Thread Tools Display Modes
Old 4th August 11, 01:08 AM   #1
AthenaStudios
WLC Member
 
Join Date: Apr 2011
Posts: 7
Default Problem with 100% width- divs and in Firefox;

Here is what I have so far: http://athenastudios.ca/test/
Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5.
My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated!
AthenaStudios is offline   Reply With Quote
Old 4th August 11, 01:35 AM   #2
jcross
WLC Lover
 
jcross's Avatar
 
Join Date: Mar 2009
Location: Baton Rouge
Posts: 108
Default Re: Problem with 100% width- divs and in Firefox;

First off, that header.png image is WAY TOO BIG! It's 737KB all by itself. This must change.

Secondly, people aware-enough to run Firefox are more likely to be running the most recent version...certainly higher than 3.6. I almost think you shouldn't even worry about it.

Looks good, btw.
__________________
Jason Cross
jcross is offline   Reply With Quote
Old 4th August 11, 02:10 AM   #3
AthenaStudios
WLC Member
 
Join Date: Apr 2011
Posts: 7
Default Re: Problem with 100% width- divs and in Firefox;

I will try to work on that. Any simple ways to keep the quality of a PNG24 without decreasing the quality?
OK. The Firefox thing is fine. Any idea what I should do with the navigation items?
AthenaStudios is offline   Reply With Quote
Old 4th August 11, 02:18 AM   #4
jcross
WLC Lover
 
jcross's Avatar
 
Join Date: Mar 2009
Location: Baton Rouge
Posts: 108
Default Re: Problem with 100% width- divs and in Firefox;

You're saving as a PNG24, but you're not utilizing it. PNG24 should be reserved for images using alpha transparency. Either remove the background on the image or save it as PNG8, JPG, GIF... scroll through your options in Photoshop and see which one is the smallest size while still retaining that visual quality you're after.

For the nav issue...
I would set your header.png image as a background-image in CSS, aligned right. Then float the nav li elements right with a margin-right on the container ul that pushes it off that right side enough to clear the tree.

Does that make sense? I'll give an exmaple in code if not.
__________________
Jason Cross
jcross is offline   Reply With Quote
Old 4th August 11, 02:40 AM   #5
AthenaStudios
WLC Member
 
Join Date: Apr 2011
Posts: 7
Default Re: Problem with 100% width- divs and in Firefox;

I think I get it, but I just want to make sure. Would you mind supplying me with a code sample? You would be my hero.
AthenaStudios is offline   Reply With Quote
Old 4th August 11, 03:03 AM   #6
jcross
WLC Lover
 
jcross's Avatar
 
Join Date: Mar 2009
Location: Baton Rouge
Posts: 108
Default Re: Problem with 100% width- divs and in Firefox;

No problem. Save the current state of your stylesheet on the side, just in case.

Remove the img in id="top", and replace your current markup with...

Also, move div#navigation INSIDE your div#top block. And remove div#navbar completely.

Code:
#page-wrap {background: url("layout/skybg.png") repeat-x scroll 0 0 transparent; }
#top {background: url(images/header.png) no-repat right center; width: 991px; height: 601px; overflow: hidden; }


ul#menu li { float: right;}
ul#menu li a {display: block; height: 146px; display: block;}
ul#menu li.owl a {width: 158px; }
ul#menu li.home a {width: 114px;}
ul#menu li.portfolio a {width: 238px;}
ul#menu li.contact a {width: 150px;}

#navigation {width: 924px; background: url("layout/navbg.png") repeat-x scroll 0 0 transparent; }
Also notice I've assigned the width/heights on the a tag directly instead of the li when using display: block. You don't need display: block on the li elements if you're using float: right

Getting a little ahead of myself here. This won't make it look perfect, but get to this point and we'll take it from there.
__________________
Jason Cross
jcross is offline   Reply With Quote
Old 5th August 11, 05:15 PM   #7
AthenaStudios
WLC Member
 
Join Date: Apr 2011
Posts: 7
Default Re: Problem with 100% width- divs and in Firefox;

That did not exactly have the desired effect: http://athenastudios.ca/test/
One sec, I'm going to try something a little different.

[EDIT]
I think I got it:
http://athenastudios.ca/test/index2.html

Last edited by AthenaStudios; 5th August 11 at 07:57 PM.
AthenaStudios is offline   Reply With Quote
Old 5th August 11, 07:54 PM   #8
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Problem with 100% width- divs and in Firefox;

You could flatten your png layers... that would help knock the size down.

Ryan.
rkrause is offline   Reply With Quote
Old 5th August 11, 07:58 PM   #9
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Problem with 100% width- divs and in Firefox;

Is this one of those trick images! I don't see any tree!

Ryan
rkrause is offline   Reply With Quote
Old 5th August 11, 08:03 PM   #10
AthenaStudios
WLC Member
 
Join Date: Apr 2011
Posts: 7
Default Re: Problem with 100% width- divs and in Firefox;

You don't see a tree in http://athenastudios.ca/test/index2.html ??
AthenaStudios is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

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

Forum Jump


All times are GMT. The time now is 06:48 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.