Image opera issue

May be you can show us your code, CSS and HTML.

Here's the css and the html:

#rcolumn {
margin: 10px;
padding: 2px;
border: 1px solid #cccccc;
float: right;
width: 158px;
}
#content {
clear: left;
margin: 0;
padding: 0;
}
#siteupdates {
margin:2px;
}
#siteupdates h2{
font-size: .8em;
color: #172173;

}
#siteupdates ul{
margin-left:0;
}
#siteupdates li{
 list-style-type: none;	
 list-style-position: inside;
}
#rcolumn img{
margin: 2px;
}
#profiles ul, #siteupdates ul{
   margin: 0;
   padding: 0;
}
#profiles li{
   padding: 10px;
   border:1px solid #cccccc;
}
#siteupdates li{
background-color: #cccccc;
margin: 1px 0px 0px 0px;
padding: 2px;
text-align: left;
}
 #profiles li, #siteupdates li{ 
   list-style-type: none;	
   list-style-position: inside;
   display:block;
}

THE HTML

<div id="rcolumn"> <a href="index.php"><img src="graphics/ads/applyonline.gif"   border="0" alt="applyonline"></a><br>
  <a href="contact.php?form=request"><img src="graphics/ads/requestinfo.gif"   border="0" alt="requestinfo"></a><br>
  <a href="content.php?con=61"><img src="graphics/ads/topten.gif"   border="0" alt="topten"></a><br>
  <a href="index.php"><img src="graphics/ads/studentlogin.gif"   border="0" alt="studentlogin"></a>
  <div id="siteupdates">
    <ul>
      <li>Subcategory</li>
      <li>list abc</li>
      <li>Tlistabc</li>
    </ul>
    <a href="details.php">more details</a> </div>
</div>
<div id="content">
  <div id="university">
    <h1> Title</h1>
    <p>The copy goes here lotsa text </p>
  </div>
  <div id="youth">
    <h2><a href="content.php?con=26" class="headline">Subtitle</a></h2>
    <img src="graphics/smiling1.jpg" width="50" class="imgleft" height="88" alt="smiling"> <img src="graphics/smile4.jpg" width="50" class="imgleft" alt="smile">
    <p> Some text to insert later</p>
  </div>
</div>

I had to edit my last post. I realized that I had the width of the rcolumn at 168px. My problem as I described in my first post is that at 158px (images 154 + 4margins = 158px) the pictures cross the border. At 168px in opera The picture is in the bordered area but I get all kinds of display issues in Firefox and IE. So what I'm trying to figure out is how to get those pesky pictures to display inside of the border.

here's a screen shot:

See how the images cross the border. In IE the border wraps the images but then I can get the list tags to fill in the space. The stop on the right side short of the 2px margin.....

Do you have a complete doctype? Does it happen in all browsers?

Show a link.

I get different results in different browsers:

IE 6:

The border wraps around the images evenly. But the list underneath stops short of the 2px border.

FF:
Perfect displays the way I want. (God bless the people at Mozilla)

Opera:
Screenshot above explains it better than I could verbally

Safari:
Perfect! Displays with a perfect 2px border all the way around. (God bless the KHTML people)

If I could get IE's list thing working could I could live with the opera problem.

Hello?

Show all of your html.

waaaaaaaaaah.........

i dunno how to deal with this css thing...

hmm..

are there certain examples...

like if i type this one, this change will happen to the said background..

hmm.. like a css- editor.. :roll:

What is the width of your images?

If the width of the images is more than the fixed-width of the div tag then the images will overlap the div.

And may be try to remove the padding from this part of the CSS

#siteupdates li{ 
background-color: #cccccc; 
margin: 1px 0px 0px 0px; 
[color=red]padding: 2px;[/color] 
text-align: left; 
} 

Hope this helps

The test page is here:

The sandbox page is here
Our Site is here.

Everything for now is tables. I'm transitioning out of tables.

Triumph's assumption proved to be true. I looked at your code and site and the Doctype is incomplete. You will want to read this to explain doctype and then make sure you put a complete doctype in your code.

http://www.alistapart.com/stories/doctype/

Looking at the sandbox site in FF and Opera, I see code showing up on the top. That code should be in the <head> section (others correct me if I am wrong).

- R

THANK YOU SO MUCH! :):)

I would have never thought that this would a doctype problem.

Thanks again.

It was the first thing that I though. Textbook example.

i dunno how to deal with this css thing...

hmm..

are there certain examples...

like if i type this one, this change will happen to the said background..

hmm.. like a css- editor.. :roll:

Erm . . .

what?