•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 456,486 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,758 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1366 | Replies: 7
 |
•
•
Join Date: Jul 2005
Posts: 15
Reputation: 
Rep Power: 4
Solved Threads: 0
Newbie Poster
Firefox left-marin problem I´m trying to figure out why the left margin of: http://www.cis-elsalvador.org/temp/e...ry_mission.php
displays differentlyin Firefox from the left margin of:
http://www.cis-elsalvador.org/temp/e...ria_mision.php
even though they share the same stylesheet and, as far as I can tell, the exact same HTML.
I had a similar problem with other pages because certain text elements did not have their margin and padding defined as 0, but these don´t have any HTML tags that are different from each other. Thanks!
Here´s the layout stylesheet:
displays differentlyin Firefox from the left margin of:
http://www.cis-elsalvador.org/temp/e...ria_mision.php
even though they share the same stylesheet and, as far as I can tell, the exact same HTML.
I had a similar problem with other pages because certain text elements did not have their margin and padding defined as 0, but these don´t have any HTML tags that are different from each other. Thanks!
Here´s the layout stylesheet:
body {
margin : auto ;
padding : 0px ;
background: #CCCC99;
}
#wrapper {
width : 778px ;
margin : 0px auto;
padding: 0;
}
#header {
text-align : left;
width: 778px;
}
#leftmenu {
float : left ;
width : 200px ;
}
#content {
float : left;
width : 578px ;
}
#footer {
clear : both ;
text-align : right;
}
.print_hidden
{
display: none;
}
•
•
Join Date: Sep 2007
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 1
Newbie Poster
Maybe try setting the body margin and padding both to 0 to override the predefined attributes across browsers.
And also make sure you handle the overflow of floats, overflow:hidden on the parent/container of the floats should keep them all in order.
Though sometimes fiddling with the DOC type will fix your problems. Have you tried validating yet?
And also make sure you handle the overflow of floats, overflow:hidden on the parent/container of the floats should keep them all in order.
Though sometimes fiddling with the DOC type will fix your problems. Have you tried validating yet?
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation:
Rep Power: 7
Solved Threads: 119
They look the same to me, on FF 2.0.0.6.
Maybe it's the difference between how FF and IE handle margins, borders, and padding:
FF puts them outside the measured position and size of a block item.
IE puts them inside the measured position and size of a block item.
Maybe it's the difference between how FF and IE handle margins, borders, and padding:
FF puts them outside the measured position and size of a block item.
IE puts them inside the measured position and size of a block item.
Last edited by MidiMagic : Sep 13th, 2007 at 5:06 pm.
Daylight-saving time uses more gasoline
•
•
Join Date: Jul 2005
Posts: 15
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
Oh wait. I thought I had fixed it ... setting overflow: hidden on the body fixed it, but then of course you can´t scroll. I think, however, that I now see the problem ..............
Any time the page has vertical overflow, it pushes the left margin over to the left a few pixels.
Setting the body to overflow: scroll fixes it in firefox, but then it causes problems in internet explorer....
Any more suggestions?
Any time the page has vertical overflow, it pushes the left margin over to the left a few pixels.
Setting the body to overflow: scroll fixes it in firefox, but then it causes problems in internet explorer....
Any more suggestions?
Last edited by arrbug : Sep 14th, 2007 at 12:08 pm. Reason: problem not fixed after all
•
•
Join Date: Jul 2005
Posts: 15
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by MidiMagic 
They look the same to me, on FF 2.0.0.6.
Maybe it's the difference between how FF and IE handle margins, borders, and padding:
FF puts them outside the measured position and size of a block item.
IE puts them inside the measured position and size of a block item.
I have the same version of firefox. Two friends who looked at it also have the same version -- but one saw the problem and one didn´t. Strange. In any event, thanks for your help!
•
•
Join Date: Jul 2005
Posts: 15
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by cmannering
Maybe try setting the body margin and padding both to 0 to override the predefined attributes across browsers.
And also make sure you handle the overflow of floats, overflow:hidden on the parent/container of the floats should keep them all in order.
Though sometimes fiddling with the DOC type will fix your problems. Have you tried validating yet?
Page does validate.
Since it was a problem with the overflow (see post below) I tried setting the min-height of the body for a quick fix. Do you see any problem with this? (I.e., what about safari and opera?)
Even if I.e. doesn´t display min-height well, it seems to be working in both browsers now, even if the fix isn´t ideal.
This also explains why people using the same browsers saw it display differently --- depending on the height of their window, and whether there was vertical overflow or not.
Any other suggestions?
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
beta bon browser browsers browsing code css development div dreamweaver echo email encryption europe firefox gecko google checkout google checkout vat html html api internet internet explorer internet explorer 7 javascript leak linux memory microsoft mozilla networking news open source open-source patch phishing scams security social software super symantec tables testing users w3c web webmail wysiwyg xml
- CSS & JS Menu Problem on IE (JavaScript / DHTML / AJAX)
- Problem with lists in advanced reply (DaniWeb Community Feedback)
- Help appreciated on a display problem (Windows 9x / Me)
- plz help a table formatting problem (HTML and CSS)
- Help please - Netscape user can't install Firefox! (Web Browsers)
- Javascript Problem with Firefox (JavaScript / DHTML / AJAX)
- Need Help for DNS Problem and 'about:blank' Problem ... (Viruses, Spyware and other Nasties)
Other Threads in the HTML and CSS Forum
- Previous Thread: Query regarding .css files.
- Next Thread: java chat
