Jump to content


css box IE problem

Started by kknaru, Jul 19 2008 08:51 PM

3 replies to this topic

#1 kknaru

    Young Padawan

  • Members
  • Pip
  • 10 posts

Posted 19 July 2008 - 08:51 PM

hi, what i'm tryin' to do is to make a box with rounded corners by putting o the two(left and right) sides two images with a rounded corner(on top) and between them the content div with a repeating background(repeat-x); in Firefox it works perfect.....but in IE there is a space between the left image and the content div and also between the content div and the right image (as you can see in the first image) :(

i tried to remove (at code level) the spaces between the images and the content div....but no changes
so....what can i do?


here is my code:

<html>
<head>
<style type="text/css">

div.box {color: gray; padding: 0px; width: 200px; height: 100%;}
div.content {background-image: url('repeat.jpg'); background-repeat: repeat-x; height: 200px; text-align: right;}
img.stanga {float: left;}
img.dreapta {float: right;}
img.afisata {float: left;}

</style>

</head>

<body>

<div class="box">
	<img class="stanga" src="stanga.jpg" alt=""
	  ><img class="dreapta" src="dreapta.jpg" alt=""
		   ><div class="content"
><img class="afisata" src="imagine.gif" alt="" width="80px" height="80px"
><p>DDD cccs  s sdasd as  d as d as d asdsadsadasdasd asd as d as d as d asd as d as dasasasdasdasdasdadasdas sdadsadasasdasda</p>
		</div>

</div>

HERE ARE THE OUTPUTS:

wrong one (Internet Explorer)
Posted Image

good one (Firefox)
Posted Image

Edited by kknaru, 19 July 2008 - 08:53 PM.

#2 Ghost

    Honored P2L Member

  • P2L Staff
  • PipPipPip
  • 675 posts
  • Gender:Male
  • Location:Australia

Posted 19 July 2008 - 09:27 PM

Add this to your css:

.box p{
margin: 0;
}

I could be wrong - but give it a go as paragraph's usually have default margins.

#3 kknaru

    Young Padawan

  • Members
  • Pip
  • 10 posts

Posted 20 July 2008 - 07:47 AM

View PostGhost, on Jul 20 2008, 03:27 AM, said:

Add this to your css:

.box p{
margin: 0;
}

I could be wrong - but give it a go as paragraph's usually have default margins.


nope...it doesn't work :(

Edited by kknaru, 20 July 2008 - 07:54 AM.

#4 Apache

    P2L Jedi

  • Twodded Staff
  • PipPipPip
  • 778 posts
  • Location:London, UK

Posted 22 July 2008 - 11:30 AM

Hi kknaru,

It most likely has something to do with standard margins, as Ghost suggested, however I could be wrong. Try adding Eric Meyer's CSS Reset to your pages and see if that helps. Could you post links to the individual images (the background images) so that we can give it a go too and see if we find a solution?

Eric Meyer's CSS Reset:
http://meyerweb.com/...reset-reloaded/
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design