SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    another unexplainable space ...

    Hi,

    I'm having a little CSS problem again. If ypou visit the following page: http://www.desk02.be/beta/webdesign.html you'll notice the div on the right which has a black border. According to my code it should be positioned perfectly against the red border but it's not in FF1.0 and Opera.
    Since FF and Opera are the standard compliant browsers it has to be something I'm doing wrong. Anyone an idea maybe ?

    EDIT (not solved) : adding a 1 px border on #webdesign-left fixed the problem but then I endup with a visible 1px border I can't hide because it runs over the soft gradients of the main background.

    Code:
      		<div id="webdesign-content">
      
      			<div id="webdesign-right">
     				<div class="process-middle">
     					<div class="process-left">
     		 			<div class="process-right">
     		 		 	text
     						</div>
      				</div>
      			</div>
      
      			</div>
      
      			<div id="webdesign-left">
     				<div id="webdesignbox-middle">
     		 		<div id="webdesignbox-left">
     		 			<div id="webdesignbox-right">
     		 		 	<p>xxx</p>
     						</div>
     					</div>
      				</div>
      
     				<div class="smallbox-middle">
     					<div class="smallbox-left">
     		 			<div class="smallbox-right">
     		 		 	&nbsp;
     						</div>
     					</div>
      				</div>
      
     				<div class="smallbox-middle">
     					<div class="smallbox-left">
     		 			<div class="smallbox-right">
     		 		 	&nbsp;
     						</div>
     					</div>
      				</div>
      
      			</div>
      
      		</div>
    Code:
      #webdesign-content {
      border: 0px solid #FFF;
      height: 815px;
      background-color: transparent;
      }
      
      #webdesign-left {
      height: 815px;
      width: 365px;
      background-color: transparent;
      }
      
      #webdesign-right {
      float: right;
      height: 815px;
      width: 350px;
      border: 1px solid black;
      margin: 0;
      padding: 0;
      }
      
      .process-middle {
      background: #DADADA url(images/layout/bg-process-middle.gif) repeat-x top center;
      margin: 0 15px 0 0;
      border: 0px solid red;
      }
      
      .process-left {
      background: transparent url(images/layout/bg-process-left.gif) no-repeat top left;
      margin: 0;
      border: 0px solid red;
      }
      
      .process-right {
      color: #252525;
      background: transparent url(images/layout/bg-process-right.gif) no-repeat top right;
      margin: 0;
      border: 0px solid blue;
      text-transform: uppercase;
      color: #515151;
      font-size: 9px;
      font-weight: bold;
      padding: 12px 0 14px 20px;
      }


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

    This is mozillas top margin bug where the parent inherits the top margin of its child. In your case the webdesignbox-middle has 14px top margin and the parent inherits it.

    You canusually change it around so that the top element has a bottom margin but that doesn't seem possible in your caes with all those nestings and images so i suugest using a transparent border to fix it.

    Code:
    #webdesign-left {
    height: 815px;
    width: 365px;
    background-color: transparent;
    border-top:1px solid transparent;
    }
    Hopefully that will cure it.

    Paul

  3. #3
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tried adding several similar border properties but offcourse not this exact one ... IE doesn't understand "transparent" in this case and colors it black, luckely the border is always on the same place so I gave it the same color as the underlying bg.

    Thanks again Paul.



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
  •