15 replies [Last post]
xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

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?

tahiriqbal
Offline
Regular
Lahore, Pakistan
Last seen: 13 years 49 weeks ago
Lahore, Pakistan
Joined: 2005-09-08
Posts: 40
Points: 0

Image opera issue

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

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

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>

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

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.

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

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.....

Anonymous
Anonymous's picture
Guru

Image opera issue

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

Show a link.

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

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)

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

Image opera issue

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

Anonymous
Anonymous's picture
Guru

Image opera issue

Triumph wrote:
Do you have a complete doctype?
Hello?

Show all of your html.

markpogi143
Offline
newbie
Last seen: 15 years 38 weeks ago
Joined: 2005-09-29
Posts: 1
Points: 0

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:

udi
Offline
Regular
London
Last seen: 12 years 50 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

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 Wink

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

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.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 14 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

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. Wink

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

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 2 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

Image opera issue

THANK YOU SO MUCH! Smile :)Smile:)Smile

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

Thanks again.

Anonymous
Anonymous's picture
Guru

Image opera issue

xaphalanx wrote:
I would have never thought that this would a doctype problem.
It was the first thing that I though. Textbook example.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 13 weeks 2 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Image opera issue

markpogi143 wrote:
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?

Verschwindende wrote:
  • CSS doesn't make pies