Div/image problem. Think this is an easy one.

[patrikmonka]

Hi there,

This is my my first website in over 10 years. At first I made it using html, tabels & iframes (as back in the days) but decided to remake it using css for the first time ever.

In dreamweaver it looks good but in all my browsers, safari, firefox, chrome and opera it "breaks" or rather two of the pictures are placed wrong.

The divs are in the right place, same size as the pictures.

The problem can be seen here:

http://www.flaw.se/test/test.html

This is how it should look like:

http://www.flaw.se/test/test.jpg

Right click on the page for the source code in test.html...

Been trying a cuple of things but non works. Guess its just a simple extra line that could fix this..

CSS code for all the divs:

 
[COLOR="SlateGray"]
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 margin: 0px 0px 0px 0px;
 background-image:url(../layout/bg1.png)
}
#wrapper { 
 margin: 0 auto;
 height: 588px;
 width: 991px;
}
#logo {
 width: 991px;
 float: left;
 padding: 0px;
 border: 0px solid #ccc;
 height: 132px;
 margin: 0px 0px 0px 0px;
}[/COLOR]
[COLOR="Black"]#uppekant {
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 width: 991px;
 height: 7px;
 float: left;
}[/COLOR]
[COLOR="SlateGray"]#navigering1 {
 float: left;
 width: 24px;
 height: 39px;
 color: #333;
 padding: 0px;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
}
#navigering2 {
 float: left;
 width: 460px;
 height: 39px;
 color: #333;
 padding: 0px;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
}
#navigering3 {
 float: left;
 width: 66px;
 height: 39px;
 color: #333;
 padding: 0px;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
}
#navigering4 {
 float: left;
 width: 367px;
 height: 39px;
 color: #333;
 padding: 0px;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
}
#navigering5 {
 float: left;
 width: 74px;
 height: 39px;
 color: #333;
 padding: 0px;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
}
#vansterkant { 
 color: #333;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 363px;
 width: 8px;
 float: left;
}
#vansterruta { 
 color: #333;
 border: 0px solid #ccc;
 background: #FFFFFF;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 363px;
 width: 491px;
 float: left;
}
#mittenbreak { 
 color: #333;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 363px;
 width: 36px;
 float: left;
}
#hogerruta { 
 color: #333;
 border: 0px solid #ccc;
 background: #FFFFFF;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 363px;
 width: 448px;
 float: left;
}
#hogerkant { 
 color: #333;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 363px;
 width: 8px;
 float: left;
}
[COLOR="Black"]#nerekant {
 width: 991px;
 float: left;
 padding: 0px;
 border: 0px solid #ccc;
 height: 7px;
 margin: 0px 0px 0px 0px;
}[/COLOR]
#copyright { 
 width: 991px;
 height: 40px;
 clear: both;
 color: #333;
 border: 0px solid #ccc;
 background: none;
 margin: 0px 0px 10px 0px;
 padding: 0px;
}[/COLOR]

[ASTP001]

I'd suggest using the radius attribute, rather than images to get curved corners. Other than that, what else seems to be the problem?

[patrikmonka]

Wow i will look in to that. Guess i will have to remake the page once again then..

This is how the page looks for me in all my browsers.

http://www.flaw.se/test/problem.jpg

Does it look right on yours?

[ASTP001]

I don't see the text in the right hand box.

[vikram1vicky]

You have defined

* {
 padding: 0;
 margin: 0; }

so there is no need to define following code again and again in each class

margin: 0px 0px 10px 0px;
 padding: 0px;

[patrikmonka]

Once again, big thanks!

It feels like the page is 80% smaller now when i remade it using css

The main problem is solved since i took the advice of radius attribute instead of images. It made the 2 boxes go from 7divs to 3divs. Incredible!

Also took away all the unnecessary padding & margin, gracias.


Please take a look at:

http://www.flaw.se/test/test.jpg

Focus on the left box. Is there a way to make the corners around the image using css? Actually i was planing to use a slider in there, you will get it from the layout. But is that possible or rather is it really hard or??

[tracknut]

You can apply the same border-radius stuff to the img tag for that image, to give it rounded corners.

Dave