SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    cologne
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy netscape & mozilla won't take "padding-right" - positioning problem

    Hello and Happy New Year everybody,

    I've just installed netscape & mozilla to check what my website looks like there and it isn't as bad as I feared but definately not good at all...

    I think the two most obvious problems (among maybe a million others... ) are, that Netscape and Mozilla won't display the "padding-right" for the "left"-id and that the navigation elements in the top right corner have moved down a few pixels.

    You can check it out at www.ritaandtherocknrollers.com/dev/html/index.html

    This is the stylesheet:

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #151D41;
    	background-image: none;
    	scrollbar-face-color: #D3C4BB;
      	scrollbar-3dlight-color: #D3C4BB;
      	scrollbar-arrow-color: #151D41;
      	scrollbar-darkshadow-color: #151D41;
      	scrollbar-highlight-color: #D3C4BB;
      	scrollbar-shadow-color: #D3C4BB;
      	scrollbar-track-color: #D3C4BB;
    }
    
    a:link {
    	color: #074783;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #074783;
    	text-decoration: underline;
    }
    
    a:visited {
    	color: #074783;
    	text-decoration: none;
    }
    
    form p {
    	clear: both;
    }
    
    form p label {
    	float: left;
    }
    
    form input {
    	float: right;
    }
    
    label.align-left {
    	float: left; 
    	text-align: right; 
    	width: 5em; 
    	margin-right: .3em; 
    }
    
    #rechts {
    	float: none;
    }
    
    #email {
    	float: right;
    }
    
    
    
    #navi {
    	z-index: 2;
    	position: absolute;
    	left: 0px;
    	top: 29px;
    	background: #151D41;
    }
    
    	#navi1 {
    		z-index: 3;
    		position: absolute;
    		left: 0px;
    		top: 0px;
    		background: #151D41;
    	}
    
    	#navi2 {
    		z-index: 3;
    		position: absolute;
    		left: 53px;
    		top: 0px;
    		background: #151D41;
    		background-image: none;
    	}
    	
    	#navi3 {
    		z-index: 3;
    		position: absolute;
    		left: 89px;
    		top: 0px;
    		background: #151D41;
    		background-image: none;
    	}
    
    	#navi4 {
    		z-index: 3;
    		position: absolute;
    		left: 146px;
    		top: 0px;
    		background: #151D41;
    	}
    
    	#navi5 {
    		z-index: 3;
    		position: absolute;
    		left: 218px;
    		top: 0px;
    		background: #151D41;
    		background-image: none;
    	}
    
    	#navi6 {
    		z-index: 3;
    		position: absolute;
    		left: 263px;
    		top: 0px;
    		background: #151D41;
    		background-image: none;
    	}
    
    #funct-navi {
    	z-index: 6;
    	position: absolute;
    	left: 757px;
    	top: 0px;
    	background: #151D41;
    	background-image: none;
    	padding: 0px;
    }
    
    	#funct-navi-1 {
    		z-index: 10;
    		position: absolute;
    		left: 14px;
    		top: 0px;
    		height: 5px;
    		background: #151D41;
    		background-image: none;
    	}
    
    	#funct-navi-2 {
    		z-index: 9;
    		position: absolute;
    		left: 17px;
    		top: 12px;
    		height: 5px;
    		background: #151D41;
    		background-image: none;
    	}
    
    	#funct-navi-3 {
    		z-index: 8;
    		position: absolute;
    		left: 2px;
    		top: 24px;
    		height: 5px;
    		background: #151D41;
    		background-image: none;
    	}
    
    	#funct-navi-4 {
    		z-index: 7;
    		position: absolute;
    		left: 0px;
    		top: 36px;
    		height: 5px;
    		background: #151D41;
    		background-image: none;
    	}
    
    	#funct-navi-5 {
    		z-index: 8;
    		position: absolute;
    		left: -1px;
    		top: 24px;
    		height: 5px;
    		background: #151D41;
    		background-image: none;
    	}
    
    #flag {
    	z-index: 6;
    	position: absolute;
    	top: 2px;
    	background: #151D41;
    	background-image: none;
    }
    
    
    #top {
    	background: #151D41 url(../pics/top_logopart.jpg);
    	background-repeat: no-repeat;
    	background-position: 590px;
    	height: 53px;
    	padding-left: 5px;
    	padding-bottom: 5px;
    	font: normal normal 600 10pt Arial, Helvetica, sans-serif;
    	color: #ffffff;
    	line-height: 24px;
    }
    
    #left {
    	z-index: 3;
    	background: #151D41 url(../pics/left.jpg);
    	position: absolute;
    	left: 0px;
    	top: 53px;
    	width: 330px;
    	height: 527px;
    }
    
    #left-text {
    	z-index: 4;
    	position: absolute;
    	left: 20px;
    	top: 25px;
    	width: 310px;
    	height: 300px;
    	font: normal normal bold 9.5pt Arial, Helvetica, sans-serif;
    	background: none;
    	color: #252629;
    	padding-top: 0px;
    	padding-right: 15px;
    	overflow: auto;
    }
    
    #left-content {
    	z-index: 5;
    	position: absolute;
    	left: 20px;
    	top: 325px;
    	width: 310px;
    	height: 190px;
    	font: normal normal bold 9.5pt Arial, Helvetica, sans-serif;
    	padding-top: 0px;
    	padding-right: 15px;
    	text-align: center;
    	vertical-align: middle;
    	overflow: hidden;
    }
    
    #left-all {
    	z-index: 4;
    	position: absolute;
    	left: 20px;
    	top: 25px;
    	width: 310px;
    	height: 450px;
    	font: normal normal bold 9.5pt Arial, Helvetica, sans-serif;
    	color: #252629;
    	overflow: auto;
    	padding-top: 0px;
    	padding-right: 15px;
    }
    
    
    #center { 
    position: absolute; 
    background: #151D41 url(../pics/center_all.jpg); 
    height: 527px; 
    left: 330px; 
    top: 53px; 
    width: 470px; 
    } 
    
    
    #right {
    	position: absolute;
    	left: 800px;
    	top: 53px;
    	background: #151D41;
    	background-image: none;
    	width: 129px;
    }
    
    #footer {
    	position: absolute;
    	top: 580px;
    	width: 100%;
    	background: #151D41;
    	background-image: none;
    	text-align: center;
    }
    
    #footerfont {
    	font: normal normal normal 7.5pt Arial, Helvetica, sans-serif;
    	color: #B3BBDF;
    }
    
    #float-left {
    	float: left;
    	padding-right: 5px;
    	padding-top: 5px;
    }
    
    #float-right {
    	float: right;
    	text-align: center;
    	padding-left: 5px;
    	padding-top: 5px;
    }
    
    #block {
    	text-align: justify;
    	display: block;
    }
    
    #headline {
    	font: normal normal bold 11pt Arial, Helvetica, sans-serif;
    	color: #252629;
    }
    
    #subheadline {
    	font: oblique normal bold 10pt Arial, Helvetica, sans-serif;
    	text-decoration: underline;
    	color: #252629;
    }
    
    #news-date {
    	font: oblique normal bold 9pt Arial, Helvetica, sans-serif;
    	color: #252629;
    }
    
    #news-headline {
    	font: normal normal bold 10pt Arial, Helvetica, sans-serif;
    	color: #252629;
    }
    
    #news-text {
    	font: normal normal normal 9pt Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    table {
    	font: normal normal bold 9.5pt Arial, Helvetica, sans-serif;
    	background: none;
    	color: #252629;
    	padding-right: 5px;
    }
    
    td.color {
    	background-color: #cccccc;
    }
    
    th {
    	font: normal normal bold 9.5pt Arial, Helvetica, sans-serif;
    	background-color: Black;
    	color: #cccccc;
    }
    
    ul {
    	list-style-image: url(../pics/pfeil.gif);
    }
    
    #info-text {
    	text-align: right;
    	font: normal normal bold 8.5pt Arial, Helvetica, sans-serif;
    	color: #252629;
    	padding-right: 2px;
    }
    
    #cd-text {
    	text-align: left;
    	font: normal normal bold 8.5pt Arial, Helvetica, sans-serif;
    	color: #252629;
    }
    
    #rahmen {
    	border: 1px dashed;
    }
    
    #links {
    	text-align: left;
    	color: #252629;	
    }
    
    #links-text {
    	font: normal normal normal 8.5pt Arial, Helvetica, sans-serif;
    }
    
    #rechts-text {
    	font: normal normal normal 8.5pt Arial, Helvetica, sans-serif;
    	text-align: justify;
    }
    
    .uline {
    	text-decoration: underline;
    }
    I've read a couple of posts about browser issues but nothing I read seemed to be related to my problem or maybe I'm still too bad of a newbie to see it.

    I didn't even dare to check Opera yet...

    Thanks for your help!

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    maybe adding a clear float would help the left side.
    Code:
     <div id="left-all">
    			Willkommen auf der neuen Rita &amp; the Rock'n'Rollers Webseite!
    			<br><br>
    			<span id="float-left">
    				<img src="../pics/cd_hotblooded_120.jpg">
    			</span>P&uuml;nktlich zum Launch haben wir  f&uuml;r Euch auch die neue CD<br>
     			<b>"Hot Blooded"</b> fertig, die ihr hier online <a href="buy.html">bestellen</a> könnt. 
    			<!-- <br><br><br> -->
                            <div class="clear"></div>  
    			Schaut Euch um, st&ouml;bert durch die Fotos und <a href="sounds.html">H&ouml;rproben</a> und wenn ihr Lust habt, 
    			tragt Euch ins <a href="voices.php">G&auml;stebuch</a> ein.<br><br>
     		</div>
    The css to use.

    Code:
     div.clear  {
     		clear:both;
     		height:1px;
     		overflow:hidden;
     		margin-top:-1px;
     		}


    Hope this helps
    Bill Rosa


  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    cologne
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried that, makes no difference...
    Thanks tho.

    Actually, I think Netscape does take the padding but it doesn't take the width of the layer...?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've read a couple of posts about browser issues but nothing I read seemed to be related to my problem or maybe I'm still too bad of a newbie to see it
    Don't worry its always hard to find the answer when you are not quite sure what you are looking for. However your main question is actually answered in the FAQ about the broken box model in IE .

    IE5 , 5.5. and (ie6 in quirks mode (see faq)) use whats called the broken box model and include padding and borders inside the specified width or height dimension. In the correct box model padding and borders should be added to the width to mak a total width so that content dimesnions are always consistent. See the faq for a full explanation.

    Here is where the problem lies and to make it work in mozilla you would need to reduce the width as follows.

    Code:
    #left-all {
     z-index: 4;
     position: absolute;
     left: 20px;
     top: 25px;
     width: 295px;
     height: 450px;
     font: normal normal bold 9.5pt Arial, Helvetica, sans-serif;
     color: #252629;
     overflow: auto;
     padding-top: 0px;
     padding-right: 15px;
    }
    * html #left-all {width:310px} /*for ie5 an 5.5. (and ie6 in quirks mode)*/
    Read the FAQ as it goes int detail on this and is one of the most important concepts you will need to grasp. Of course you will need to look at all the elements in your page that have either padding and borders and dimensions and use the hack or the nesting method to overcome these problems.

    Your second problem can be cured with this code by setting the image to display:block.

    Code:
    #funct-navi img {display:block}
    #funct-navi {
     z-index: 6;
     position: absolute;
     left: 757px;
     top: 4px;
     background: #151D41;
     background-image: none;
     padding: 0px;
    }
    This will even the display out in both browers (adjust top to suit).

    Paul

  5. #5
    SitePoint Member
    Join Date
    Nov 2004
    Location
    cologne
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!
    Now that looks a lot better
    I think I've understood the concept now, and actually a very easy fix (when you know what you're doing ).

    Sorry I didn't realize my problem was the first in the FAQs...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •