Back To Website Design Forum

CSS Prob

  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 19, 2004
  • Posts: 2123
  • Status: Offline

Post November 25th, 2007, 5:43 pm

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.     }
  5. .left-element {
  6.   float: left;
  7.   }
  9. .right-element {
  10.   float: right;
  11.   text-align: right;
  12.   }
  13. .roundcont {
  14.     width: 800px;
  15.     background-color: #f90;
  16.     color: #fff;
  17.     
  18. }
  20. .roundcont p {
  21.     margin: 0 10px;
  22. }
  24. .roundtop {
  25.     background: url(tr.gif) no-repeat top right;
  26. }
  28. .roundbottom {
  29.     background: url(br.gif) no-repeat top right;
  30. }
  32. img.corner {
  33.   width: 15px;
  34.   height: 15px;
  35.   border: none;
  36.   display: block !important;
  37. }
  38. .roundcont2 {
  39.     width: 200px;
  40.     background-color: #f90;
  41.     color: #fff;
  42. }
  43. .roundcont3 {
  44.     width: 590px;
  45.     background-color: #f90;
  46.     color: #fff;
  47. }


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>
  9.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  10.   elit, sed do eiusmod tempor incididunt ut labore et
  11.   dolore magna aliqua. Ut enim ad minim veniam, quis
  12.   nostrud exercitation ullamco laboris nisi ut aliquip
  13.   ex ea commodo consequat. Duis aute irure dolor in
  14.   reprehenderit in voluptate velit esse cillum dolore eu
  15.   fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  16.   non proident, sunt in culpa qui officia deserunt mollit
  17.   anim id est laborum.</p>
  18.  
  19.   <div class="roundbottom">
  20.      <img src="bl.gif" alt=""
  21.      width="15" height="15" class="corner"
  22.      style="display: none" />
  23.   </div>
  24. </div>    
  25. <br />
  26. <div class="left-element">
  27. <div class="roundcont2">
  28.   <div class="roundtop">
  29.      <img src="tl.gif" alt=""
  30.      width="15" height="15" class="corner"
  31.      style="display: none" />
  32.   </div>
  34.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  35.   elit, sed do eiusmod tempor incididunt ut labore et
  36.   dolore magna aliqua. Ut enim ad minim veniam, quis
  37.   nostrud exercitation ullamco laboris nisi ut aliquip
  38.   ex ea commodo consequat. Duis aute irure dolor in
  39.   reprehenderit in voluptate velit esse cillum dolore eu
  40.   fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  41.   non proident, sunt in culpa qui officia deserunt mollit
  42.   anim id est laborum.</p>
  43.  
  44.   <div class="roundbottom">
  45.      <img src="bl.gif" alt=""
  46.      width="15" height="15" class="corner"
  47.      style="display: none" />
  48.   </div>
  49. </div>    
  50. </div>
  52. <div class="right-element">
  53. <div class="roundcont3">
  54.   <div class="roundtop">
  55.      <img src="tl.gif" alt=""
  56.      width="15" height="15" class="corner"
  57.      style="display: none" />
  58.   </div>
  60.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing
  61.   elit, sed do eiusmod tempor incididunt ut labore et
  62.   dolore magna aliqua. Ut enim ad minim veniam, quis
  63.   nostrud exercitation ullamco laboris nisi ut aliquip
  64.   ex ea commodo consequat. Duis aute irure dolor in
  65.   reprehenderit in voluptate velit esse cillum dolore eu
  66.   fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  67.   non proident, sunt in culpa qui officia deserunt mollit
  68.   anim id est laborum.</p>
  69.  
  70.   <div class="roundbottom">
  71.      <img src="bl.gif" alt=""
  72.      width="15" height="15" class="corner"
  73.      style="display: none" />
  74.   </div>
  75. </div>    
  76. </div>
  77. </div>
JOIN OZZU'S FACEBOOK GROUP!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 25th, 2007, 5:43 pm

  • X3ndou
  • Proficient
  • Proficient
  • User avatar
  • Joined: Nov 06, 2004
  • Posts: 263
  • Loc: New Jersey
  • Status: Offline

Post November 25th, 2007, 7:53 pm

Could you outline the problem please, sir?

Not all of us have the luxury of popping open IE.
"On the day *I* go to work for Microsoft, faint oinking sounds will be heard from far overhead, the moon will not merely turn blue but develop polkadots, and hell will freeze over so solid the brimstone will go superconductive." -Eric S. Raymond
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 19, 2004
  • Posts: 2123
  • Status: Offline

Post November 25th, 2007, 9:55 pm

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.
JOIN OZZU'S FACEBOOK GROUP!
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 26th, 2007, 1:21 am

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 ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 26th, 2007, 1:22 am

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
Let's leave all our *plum* where it is and go live in the jungle ...
  • Fabinator
  • Proficient
  • Proficient
  • No Avatar
  • Joined: May 05, 2007
  • Posts: 467
  • Status: Offline

Post November 27th, 2007, 7:20 am

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)

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 87 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.