PDA

Click to See Complete Forum and Search --> : Why Doesn't This Work?

Dysan
12-30-2007, 02:48 PM
How come the page at the following URL, displays fine using Internet Explorer (IE), but doesn't display correctly using FireFox (FF)?

The rounded corner images, should line up with the square corners of the DIV.

How do I get it to work in both web browsers?

URL: http://www.freewebs.com/ticstacs/Corners/Index.html (http://"http://www.freewebs.com/ticstacs/Corners/Index.html")
WebJoel
12-30-2007, 04:07 PM
No such URL: check the addy please..
Dysan
12-30-2007, 04:22 PM
Try this?

http://www.freewebs.com/ticstacs/Corners/Index.html
WebJoel
12-30-2007, 07:02 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Index.css" />

<style>
Body{ BACKGROUND: RGB(24,28,24);}

#ButCol1{TOP: 140px;LEFT: 13px;WIDTH: 480px;
HEIGHT: 133px;POSITION: relative;BORDER: 2px solid RGB(49,48,49);}

#But_tl{TOP: -2px;LEFT: -2px;WIDTH: 10px;HEIGHT: 9px;POSITION: absolute;
BACKGROUND: url('But_tl.gif') no-repeat;}

#But_tr{TOP: -2px;right:-2px; WIDTH: 10px;HEIGHT: 9px;
POSITION: absolute;BACKGROUND: url('But_tr.gif') no-repeat;
}

#But_bl{bottom:-2px; LEFT: -2px;WIDTH: 10px;HEIGHT: 9px;POSITION: absolute;
BACKGROUND: url('But_bl.gif') no-repeat;}

#But_br{bottom:-2px; right:-2px; WIDTH: 10px;HEIGHT: 9px;
POSITION: absolute;BACKGROUND: url('But_br.gif') no-repeat;}
</style>

<base href="http://www.freewebs.com/ticstacs/Corners/" />

</head>

<body>

<div id="ButCol1">
<img id="But_tl" src="But_tl.gif">
<img id="But_tr" src="But_tr.gif">
<img id="But_bl" src="But_bl.gif">

<img id="But_br" src="But_br.gif">
</div>

<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";urchinTracker();}</script></body>
</html> Instead of (for instance) positioning the "bottom/right" image "TOP:122px; LEFT: 468px;", get it "bottom" and "right" (not "TOP" and "LEFT") and use a negative position to complete the desired 'overlap'... solves many problems and, this allows the content box to grow in height when you add content (whereas the way you have it, add content and the roundy-corner stays put at 122-top and 468-left) :)

Also, a fully-qualified !doctype (one with a URL, as I have here) is really a good thing to have, and, change the CAPITAL LETTERS to lowercase. -Solves problems later on (and, for the !doctype I chose, this would be required for validation). :)
Centauri
12-30-2007, 07:27 PM
The page is in quirks mode, using the broken box model in IE, due to an incomplete doctype (should also include the uri).

Also, rather than positioning everything from the top left of the box, use the right and bottom properties to position relative to the corner the graphics are going into. You are also using the img tag, and specifying the same image as a background to the image ?? - as the images are presentational, they should not even be in the html. Using a little used valid tag such as a <b> can make the markup and css simpler.

I also note that IE has a problem calculating the correct position of the bottom of the container box if the box has an odd pixel height - an even number height solves the problem here (IE has a few maths rounding issues).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
background-color: #181C18;
}
#ButCol1 {
width: 480px;
height: 134px;
position: relative;
border: 2px solid #313031;
margin: 140px 0 0 13px;
}
#ButCol1 b {
position: absolute;
width: 10px;
height: 9px;
font-size: 1px;
overflow: hidden;
line-height: 1px;
}
#ButCol1 .but_tl {
background-image: url(But_tl.gif);
left: -2px;
top: -2px;
}
#ButCol1 .but_tr {
background-image: url(But_tr.gif);
right: -2px;
top: -2px;
}
#ButCol1 .but_bl {
background-image: url(But_bl.gif);
left: -2px;
bottom: -2px;
}
#ButCol1 .but_br {
background-image: url(But_br.gif);
right: -2px;
bottom: -2px;
}
-->
</style>
</head>

<body>
<div id="ButCol1">
<b class="but_tl"></b><b class="but_tr"></b><b class="but_bl"></b><b class="but_br"></b></div>
</body>
</html>



Edit: Damn ... and Joel gets in first by posting while I am working on it.... :rolleyes:
WebJoel
12-31-2007, 08:42 AM
Edit: Damn ... and Joel gets in first by posting while I am working on it.... :rolleyes: and we end the year the same way we began... :D
Centauri
12-31-2007, 08:57 AM
and we end the year the same way we began... :D

And Happy New Year to you ..... I can say that because it IS here - you have to wait :D :D :D
WebJoel
12-31-2007, 12:02 PM
thanx :D