Ive got a stack of images in a div tag. Under the images is a UL/LI list element. The division tag has a border. In OPERA the images over hang the border. They appear as if they are on top of the border. Firefox and IE render the images okay with the border wrapped around the images. What can I do to fix this?
Image opera issue
May be you can show us your code, CSS and HTML.
Image opera issue
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>
Image opera issue
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.
Image opera issue
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.....
Image opera issue
Do you have a complete doctype? Does it happen in all browsers?
Show a link.
Image opera issue
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)
Image opera issue
If I could get IE's list thing working could I could live with the opera problem.
Image opera issue
Do you have a complete doctype?
Show all of your html.
Image opera issue
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:
Image opera issue
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
Image opera issue
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.
Image opera issue
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
Image opera issue
THANK YOU SO MUCH! :)
:)
I would have never thought that this would a doctype problem.
Thanks again.
Image opera issue
I would have never thought that this would a doctype problem.
Image opera issue
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:
Erm . . .
what?