Web Layout
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Web Design > Web Layout
Reload this Page

CSS layout problems in Firefox

Discuss CSS layout problems in Firefox in the Web Layout forum on ASP Free.
CSS layout problems in Firefox Web Layout forum discussing design strategies and topics that range from general site layout to advanced site design. Find out what everyone is doing, and how best to arrange your content.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old July 28th, 2005, 02:38 PM
holmags holmags is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Wales
Posts: 110 holmags User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 6 h 55 m 26 sec
Reputation Power: 4
CSS layout problems in Firefox
Hi I'm having a few probs with getting a page to layout properly in firefox. It works perfectly in Opera and IE but theres one error with the firefox browser. The prob is with the nav menu in the left div. Its rendering towards the right of the left div and over lapping the content. I've tried modifyimg the margins, padding etc but to no avail.

Here's the code for my css:
Code:
<!--
/*--------------------Formatting--------------------*/

body {
margin: 20px 120px;
padding: 0px;
font-size: 12px;
background: #BEDAF7;

}
.menu {
background: #EAF5FF;
}
.menu ul {
list-style-type: none;
margin: 0px;
}
.menu li {
border-bottom: 1px solid #BEDAF7;
line-height: 25px;

}
.menu li a {
border-left: 10px solid #7EB7EB;
padding-left: 10px;
width: 100%;

}

.menu li a:link, .menu li a:visited {
color: #000;
display: block;
}

.menu li a:hover, .menu li a:active  {
border-left: 10px solid #EAF5FF;
background: #7EB7EB;
width: 100%;
text-decoration: none;
color: #FFF;
display: block;
}
.menu li a.current:visited {
background: #2F4E6F;
color: #FFF;
border-left: 10px solid #DDD;
}
#bar a:link, #bar a:visited {
	color: #FFF;
	padding-left: 5px;
}

#bar a:hover, #bar a:active {
	color: #FF7E1C;
}
#barbot a:link, #barbot a:visited {
	color: #FFF;
	padding-left: 5px;
}

#barbot a:hover, #barbot a:active {
	color: #FF7E1C;
}
#user a {
padding-right: 10px;
}
span.force{
color: #000;
font-size: 18px;
font-family: Palatino Linotype, serif;
}
span.design {
color: #ddd;
font-size: 18px;
font-family: Palatino Linotype, serif;
}
#sub {
width: 100%;
background: #32A1EA;
padding-left: 20px;
}
#sub a:link, #sub a:visited {
	color: #FFF;
}

#sub a:hover, #sub a:active {
	color: #FF7E1C;
}
#sub img {
margin-left: 5px;
}
#sub2 {
margin-left: 10px;
}
#sub2 img {
margin-right: 5px;
}
#bar img {
margin-left: 5px;
}
#barbot a {
padding-right: 10px;
}
table {
width: 70%;
font-size: 12px;
}
/*--------------------Layout--------------------*/
#head {
height: 15%;
border: 1px solid #000;
border-bottom: 0px;
padding: 10px;
background: #FFF;
}
#bar {
background: #32A1EA;
padding: 3px;
border: 1px solid #000;

}
#location {
width: 50%;
float: left;
}
#user {
width: 50%  
float: right;
text-align: right;
}
#container {
height: 100%;
border: 1px solid #000;
border-top: 0px;
background: #FFF;
}
#left {
float: left;
width: 20%;
height: 100%;
background: #EAF5FF;
}

#content {
float: right;
width: 80%;
height: 100%;
}
.information {
padding: 10px;
}
#contenthead {
border-bottom: 1px solid #BEDAF7;
font-size: 14px;
padding-bottom: 5px;
}
.border {
margin-top: 5px;
border-bottom: 1px solid #7EB7EB;
}
.boxclear  { 
clear: both; 
line-height: 0px;
}
#footer {
height: 1%;
padding: 10px;
background: #FFF;
}
#barbot {
background: #4096E1;
padding: 3px;
border: 1px solid #000;
border-top: 0px;
text-align: center;

}
-->


Also can anyone tell me why I've had to leave out the closing ; on the user div's width. If I put it back in the bar's layout messes up in all three browsers.

Thanks

holmags
Reply With Quote
  #2  
Old July 29th, 2005, 07:14 AM
Aggravated.NET's Avatar
Aggravated.NET Aggravated.NET is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jun 2005
Posts: 452 Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 40 m 25 sec
Reputation Power: 7
Hey,

width: 50% is kind of iffy in CSS, if you don't put your closing tag then the width isn't interprated so your layout isn't stretched out. So you might want to come up with an alternative solution for that one.

However could you point out exactly where the rest of your spilling content is, and also show some of your HTML (the relevant part)? It sounds like content leak, but being no CSS guru I'm not sure just by the smell of it. Try adding some top padding, just 1px should do and it shouldn't affect your design too much.
Reply With Quote
  #3  
Old July 29th, 2005, 12:47 PM
holmags holmags is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Wales
Posts: 110 holmags User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 6 h 55 m 26 sec
Reputation Power: 4
Hi thanks for replying. Thanks for giving me an explanation about the 50% width. It was starting to puzzle me

To make the code easier to read I've done a demo for the menu. Heres the html with the css included:

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style ="text/css">
#menu {
width: 20%;
background: #EAF5FF;

}
ul {
list-style: none;
margin: 0px;

}
li {
border-bottom: 1px solid #BEDAF7;
line-height: 25px;
padding-right: 1px;
}
#menu li a {
border-left: 10px solid #7EB7EB;
padding-left: 10px;
width: 100%;
color: #000;
display: block;
}
#menu li a:hover {
border-left: 10px solid #EAF5FF;
background: #7EB7EB;
width: 100%;
text-decoration: none;
color: #FFF;

}
#menu li a.one:hover {
border-left: 10px solid #DDD;
}
#menu li a.two:hover {
border-left: 10px solid #FF9C00;
}
#menu li a.three:hover {
border-left: 10px solid #CC0000;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="menu">
<ul>
	<li><a class="one" href="#">Home</a></li>
	<li><a class="two" href="#">Templates</a></li>
	<li><a class="three" href="#">Web Design</a></li>
	<li><a href="#">Applications</a></li>
</ul>	
</div>
</body>
</html>


The menu should be aligned directly to the left but is lined up halfway along the menu div. Any ideas?


thanks

holmags
Reply With Quote
  #4  
Old July 29th, 2005, 01:25 PM
Aggravated.NET's Avatar
Aggravated.NET Aggravated.NET is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jun 2005
Posts: 452 Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 40 m 25 sec
Reputation Power: 7
Well there are two reasons why you won't be at the ideal position.

1. You're using width:20%; for the width of your menu div, this will pose the same problem as you width:50%; I suggest you give it an actual px size.

2. You're using list items to display your items. List items by default have an indentation of about 10px.

Try changing those and if it doesn't help let me know.
Reply With Quote
  #5  
Old July 29th, 2005, 01:50 PM
holmags holmags is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Wales
Posts: 110 holmags User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 6 h 55 m 26 sec
Reputation Power: 4
Thanks for replying. I've just modified the file and it is all down to the <ul>. The only problem now is that its not the desired output. I originally had the menu as it is now but without the <ul>.

Heres the new code:

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style ="text/css">
#menu {
width: 190px;
background: #EAF5FF;
line-height: 25px;
}

#menu a {
border-left: 10px solid #7EB7EB;
padding-left: 10px;
width: 100%;
color: #000;
display: block;
border-bottom: 1px solid #BEDAF7;
}
#menu a:hover {
border-left: 10px solid #EAF5FF;
background: #7EB7EB;
width: 100%;
text-decoration: none;
color: #FFF;

}
#menu a.one:hover {
border-left: 10px solid #DDD;
}
#menu a.two:hover {
border-left: 10px solid #FF9C00;
}
#menu a.three:hover {
border-left: 10px solid #CC0000;
}
* { 
    -moz-box-sizing: border-box; 
} 


</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="menu">
<a class="one" href="#">Home</a>
<a class="two" href="#">Templates</a>
<a class="three" href="#">Web Design</a>
<a href="#">Applications</a>
	
</div>
</body>
</html>


The border no longer goes all the way to the left. In the previous version the border can be seen over the thick line down the left side. I'll have to figure out another way to do it

Is there a major prob with using % for the widths/height?


thanks for all your help


holmags
Reply With Quote
  #6  
Old July 29th, 2005, 01:54 PM
Aggravated.NET's Avatar
Aggravated.NET Aggravated.NET is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jun 2005
Posts: 452 Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 40 m 25 sec
Reputation Power: 7
I don't know about the % for the wdith/height, I'd google it to make sure, but personnaly, I've always had problems with them.

Why don't you put the borders on your menu div instead of each element list?

Can you post a picture of what you're trying to achieve and what you currently have?
Reply With Quote
  #7  
Old July 29th, 2005, 02:05 PM
holmags holmags is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Wales
Posts: 110 holmags User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 6 h 55 m 26 sec
Reputation Power: 4
I'm not sure on how to insert an image but I'll give it a go.

[IMG]C:\Documents and Settings\holmags\Desktop\menu.gif[/IMG]

If this hasn't worked do you know how to insert an image? I've included the code from the first cut down menu just incase it hasn't worked.

Heres the code:

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style ="text/css">
#menu {
width: 20%;
background: #EAF5FF;

}
ul {
list-style: none;
margin: 0px;

}
li {
border-bottom: 1px solid #BEDAF7;
line-height: 25px;
padding-right: 1px;
}
#menu li a {
border-left: 10px solid #7EB7EB;
padding-left: 10px;
width: 100%;
color: #000;
display: block;
}
#menu li a:hover {
border-left: 10px solid #EAF5FF;
background: #7EB7EB;
width: 100%;
text-decoration: none;
color: #FFF;

}
#menu li a.one:hover {
border-left: 10px solid #DDD;
}
#menu li a.two:hover {
border-left: 10px solid #FF9C00;
}
#menu li a.three:hover {
border-left: 10px solid #CC0000;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="menu">
<ul>
	<li><a class="one" href="#">Home</a></li>
	<li><a class="two" href="#">Templates</a></li>
	<li><a class="three" href="#">Web Design</a></li>
	<li><a href="#">Applications</a></li>
</ul>	
</div>
</body>
</html>


thanks

Grant
Reply With Quote
  #8  
Old July 29th, 2005, 02:19 PM
Aggravated.NET's Avatar
Aggravated.NET Aggravated.NET is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jun 2005
Posts: 452 Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 40 m 25 sec
Reputation Power: 7
Okay try this, I think this is what you want.

Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style ="text/css">
#menu {
width: 150px;
background: #EAF5FF;

}
ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
border-bottom: 1px solid #BEDAF7;
line-height: 25px;
padding-right: 1px;
}
#menu li a {
border-left: 10px solid #7EB7EB;
padding-left: 10px;
width: 130px;
color: #000;
display: block;
}
#menu li a:hover {
border-left: 10px solid #EAF5FF;
background: #7EB7EB;
width: 130px;
text-decoration: none;
color: #FFF;

}

#menu li a.one:hover {
border-left: 10px solid #DDD;
}
#menu li a.two:hover {
border-left: 10px solid #FF9C00;
}
#menu li a.three:hover {
border-left: 10px solid #CC0000;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="menu">
<ul>
	<li><a class="one" href="#">Home</a></li>
	<li><a class="two" href="#">Templates</a></li>
	<li><a class="three" href="#">Web Design</a></li>
	<li><a href="#">Applications</a></li>
</ul>	
</div>
</body>
</html>


edit: you'll have to modify the width so it'll fit with IE... stupid browser...
Reply With Quote
  #9  
Old July 29th, 2005, 02:33 PM
holmags holmags is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Wales
Posts: 110 holmags User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 6 h 55 m 26 sec
Reputation Power: 4
Thats the type of menu I'm looking for. Thanks. The width in ie was playing up though but I've changed the widths to 150px and cos the menu was overlapping in firefox I added this bit of code:

* {
-moz-box-sizing: border-box;
}


The layouts the same in every browser now. Haven't checked any of my site with netscape so there'll prob be tons of probs with the css. When my sites complete I'll post the url


thanks a lot

Grant
Reply With Quote
  #10  
Old July 29th, 2005, 02:39 PM
Aggravated.NET's Avatar
Aggravated.NET Aggravated.NET is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jun 2005
Posts: 452 Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level)Aggravated.NET User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 40 m 25 sec
Reputation Power: 7
Hey,

no problem and I'm glad it's working.

Have a good weekend
Reply With Quote
  #11  
Old July 29th, 2005, 02:48 PM
holmags holmags is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Wales
Posts: 110 holmags User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 6 h 55 m 26 sec
Reputation Power: 4
U to

thanks
Reply With Quote
  #12  
Old March 20th, 2006, 12:32 PM
kevinoconnell kevinoconnell is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Mar 2006
Posts: 1 kevinoconnell User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 7 m
Reputation Power: 0
not the same issue but similar
i'm having a similar problem...

1.0.5.1 Firefox, installed and reinstalled and still having an issue with my css bg.

it's pretty simple, and the problem only occurs in firefox on windows. Firefox and safari on mac os are fine. IE on mac os and windows are fine.

here is the css for the bg settings...

BODY {
background-position: bottom;
background-image: url("images/bg3.gif");
background-repeat: no-repeat;
background-color: #ffffff;

margin: 0px;
padding: 0px;
text-align: center;
}

basically the image is loading to the top, and not to the bottom.

any ideas?

thanks.
Reply With Quote
Reply

Viewing: ASP Free Forums > Web Design > Web Layout > CSS layout problems in Firefox

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support |