CSS Prob

  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

I am trying to figure out WHY my CSS is rendering perfectly in FF and it doesn't want to work right in IE. The right content box is not displaying properly, Can anyone help me with a way to make it display right?

Its a very basic page at the moment, just trying to get the boxes right, but it looks like CRAP in IE.

Thanks in advance.

Here is the CSS.

Code: [ Select ]
.container {
    width:800px
    }

.left-element {
  float: left;
  }

.right-element {
  float: right;
  text-align: right;
  }
.roundcont {
    width: 800px;
    background-color: #f90;
    color: #fff;
    
}

.roundcont p {
    margin: 0 10px;
}

.roundtop {
    background: url(tr.gif) no-repeat top right;
}

.roundbottom {
    background: url(br.gif) no-repeat top right;
}

img.corner {
  width: 15px;
  height: 15px;
  border: none;
  display: block !important;
}
.roundcont2 {
    width: 200px;
    background-color: #f90;
    color: #fff;
}
.roundcont3 {
    width: 590px;
    background-color: #f90;
    color: #fff;
}
  1. .container {
  2.     width:800px
  3.     }
  4. .left-element {
  5.   float: left;
  6.   }
  7. .right-element {
  8.   float: right;
  9.   text-align: right;
  10.   }
  11. .roundcont {
  12.     width: 800px;
  13.     background-color: #f90;
  14.     color: #fff;
  15.     
  16. }
  17. .roundcont p {
  18.     margin: 0 10px;
  19. }
  20. .roundtop {
  21.     background: url(tr.gif) no-repeat top right;
  22. }
  23. .roundbottom {
  24.     background: url(br.gif) no-repeat top right;
  25. }
  26. img.corner {
  27.   width: 15px;
  28.   height: 15px;
  29.   border: none;
  30.   display: block !important;
  31. }
  32. .roundcont2 {
  33.     width: 200px;
  34.     background-color: #f90;
  35.     color: #fff;
  36. }
  37. .roundcont3 {
  38.     width: 590px;
  39.     background-color: #f90;
  40.     color: #fff;
  41. }


And the HTML

Code: [ Select ]
<div class="container">
<div class="roundcont">
  <div class="roundtop">
     <img src="tl.gif" alt=""
     width="15" height="15" class="corner"
     style="display: none" />
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.</p>
 
  <div class="roundbottom">
     <img src="bl.gif" alt=""
     width="15" height="15" class="corner"
     style="display: none" />
  </div>
</div>    
<br />
<div class="left-element">
<div class="roundcont2">
  <div class="roundtop">
     <img src="tl.gif" alt=""
     width="15" height="15" class="corner"
     style="display: none" />
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.</p>
 
  <div class="roundbottom">
     <img src="bl.gif" alt=""
     width="15" height="15" class="corner"
     style="display: none" />
  </div>
</div>    
</div>

<div class="right-element">
<div class="roundcont3">
  <div class="roundtop">
     <img src="tl.gif" alt=""
     width="15" height="15" class="corner"
     style="display: none" />
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.</p>
 
  <div class="roundbottom">
     <img src="bl.gif" alt=""
     width="15" height="15" class="corner"
     style="display: none" />
  </div>
</div>    
</div>
</div>
  1. <div class="container">
  2. <div class="roundcont">
  3.   <div class="roundtop">
  4.      <img src="tl.gif" alt=""
  5.      width="15" height="15" class="corner"
  6.      style="display: none" />
  7.   </div>
  8.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  9.   elit, sed do eiusmod tempor incididunt ut labore et
  10.   dolore magna aliqua. Ut enim ad minim veniam, quis
  11.   nostrud exercitation ullamco laboris nisi ut aliquip
  12.   ex ea commodo consequat. Duis aute irure dolor in
  13.   reprehenderit in voluptate velit esse cillum dolore eu
  14.   fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  15.   non proident, sunt in culpa qui officia deserunt mollit
  16.   anim id est laborum.</p>
  17.  
  18.   <div class="roundbottom">
  19.      <img src="bl.gif" alt=""
  20.      width="15" height="15" class="corner"
  21.      style="display: none" />
  22.   </div>
  23. </div>    
  24. <br />
  25. <div class="left-element">
  26. <div class="roundcont2">
  27.   <div class="roundtop">
  28.      <img src="tl.gif" alt=""
  29.      width="15" height="15" class="corner"
  30.      style="display: none" />
  31.   </div>
  32.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  33.   elit, sed do eiusmod tempor incididunt ut labore et
  34.   dolore magna aliqua. Ut enim ad minim veniam, quis
  35.   nostrud exercitation ullamco laboris nisi ut aliquip
  36.   ex ea commodo consequat. Duis aute irure dolor in
  37.   reprehenderit in voluptate velit esse cillum dolore eu
  38.   fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  39.   non proident, sunt in culpa qui officia deserunt mollit
  40.   anim id est laborum.</p>
  41.  
  42.   <div class="roundbottom">
  43.      <img src="bl.gif" alt=""
  44.      width="15" height="15" class="corner"
  45.      style="display: none" />
  46.   </div>
  47. </div>    
  48. </div>
  49. <div class="right-element">
  50. <div class="roundcont3">
  51.   <div class="roundtop">
  52.      <img src="tl.gif" alt=""
  53.      width="15" height="15" class="corner"
  54.      style="display: none" />
  55.   </div>
  56.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  57.   elit, sed do eiusmod tempor incididunt ut labore et
  58.   dolore magna aliqua. Ut enim ad minim veniam, quis
  59.   nostrud exercitation ullamco laboris nisi ut aliquip
  60.   ex ea commodo consequat. Duis aute irure dolor in
  61.   reprehenderit in voluptate velit esse cillum dolore eu
  62.   fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  63.   non proident, sunt in culpa qui officia deserunt mollit
  64.   anim id est laborum.</p>
  65.  
  66.   <div class="roundbottom">
  67.      <img src="bl.gif" alt=""
  68.      width="15" height="15" class="corner"
  69.      style="display: none" />
  70.   </div>
  71. </div>    
  72. </div>
  73. </div>
  • X3ndou
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: New Jersey

Post 3+ Months Ago

Could you outline the problem please, sir?

Not all of us have the luxury of popping open IE.
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

I though I did.. I will elaborate for you.

The right box in IE is not rendering properly. The corners are not rounded, they are square and on the right hand side of the box theres a seperate piece thats rounded, but it is not meant to be there.

I have been googling a solution and it says something about a seperate stylesheet for IE. How does that work? :shock:

//BTW I am female haha.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

Have you got a link to the problematic site ... ? it would be easier if we could see it in action and have those images that you are using ...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

And about the seperate stylesheet thing, I did post an example of that for bogey a while ago, I'll try and find it, but I think it would be better to have one stylesheet that works on all the pages instead of different stylesheets ...

edit: found it ... http://www.ozzu.com/website-design-forum/problem-with-site-t81396-15.html
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

righteous_trespasser wrote:
And about the seperate stylesheet thing, I did post an example of that for bogey a while ago, I'll try and find it, but I think it would be better to have one stylesheet that works on all the pages instead of different stylesheets ...

edit: found it ... http://www.ozzu.com/website-design-forum/problem-with-site-t81396-15.html


Isn't it more convenient to use conditional comments?

Code: [ Select ]
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
  1. <!--[if IE]>
  2. <link href="ie.css" rel="stylesheet" type="text/css" />
  3. <![endif]-->


Any other browser will see a comment, but ie is programmed to see the conditional comment syntax.
It can also be used for different versions of IE (click)

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.