CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old July 17th, 2003, 05:48 PM
mldeveloper mldeveloper is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Posts: 1 mldeveloper User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
css padding inside absolute div

PHP Code:
<html>
<
head>
<
style type="text/css">
body {
    
margin0px;
}
#leftbox {
    
border1px dashed;
    
positionabsolute;
    
width150px;
    
/*padding: 10px;*/
}
#rightbox {
    
border1px dashed;
    
positionabsolute;
    
left151px;
    
/*padding: 10px;*/
}
</
style>
</
head>

<
body>
<
div id="leftbox">
  
Lorem ipsum dolor sit ametconsectetuer adipiscing elitSuspendisse potentiSed hendrerit purus sed elitDuis vitae nuncIn tempor fermentum leoFusce dapibus.
</
div>
<
div id="rightbox">
  
Lorem ipsum dolor sit ametconsectetuer adipiscing elitSuspendisse potentiSed hendrerit purus sed elitDuis vitae nuncIn tempor fermentum leoFusce dapibus.
  
Quisque orciCurabitur in sapienNullam in pedeAenean lacinia augue ac massaMaecenas ut risus et lectus tempor egestasNulla tellus tellusposuere sedbibendum
  vitae
mattis euodioMorbi sagittis pede vel tortorFusce vestibulum congue nislUt vel diam sit amet felis iaculis aliquamNulla wisi tortormollis sedpellentesque
  quis
facilisis nonduiUt massaDuis egestas purus vel anteNam condimentum pulvinar purusMorbi tempus dolor id anteMaecenas nibh enimvulputate vitaeultrices
  non
pulvinar eumetusSed sit amet tortorCurabitur at lacus sit amet lorem porttitor commodoProin justoAliquam erat volutpatFusce sit amet tortorCurabitur quis
  sem et metus posuere tempus
Curabitur lobortis est nec massa.
</
div>
</
body>
</
html


When I use that code as it currently is, everything loooks fine in IE and netscape, as soon as I uncomment the padding, IE will preserve the positions and the div's will be padded accordingly, in netscape and Firebird, the rightbox and leftbox divs overlap? How can I add padding to the div without the overlap?

Reply With Quote
  #2  
Old July 18th, 2003, 01:14 AM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
 
Join Date: May 2003
Location: Dallas
Posts: 4,541 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 1 h 28 m 48 sec
Reputation Power: 597
This is IE5.x's buggy rendering. The proper way to do things is for the padding and border to be added to the width. Modern browsers such as NS6+, Mozilla, Opera, and others do this correctly. This seems to be the only CSS bug that got fixed in IE6.

As an example, the box should be 100+20+2=122px wide if width:100px; padding:10px; border: 1px;

IE5.x will render the same box as 100px wide. IE subtracts the padding and border from the width.

For a hack, check this site .

Now that you can make IE5x work correctly, you can adjust your positioning appropriately.
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

Ask a better question, get a better answer.

Last edited by kk5st : July 18th, 2003 at 02:38 AM.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > css padding inside absolute div


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
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 | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway