Hello, I'm having a problem replacing my table style layout with a css style layout. My example (real small):
<html><head><link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"css/rkpropertyservices2.css"></head>
<body>
<div id="topLeft"></div>
<div id="topCenter"></div>
<div id="topRight"></div>
</body></html>
and the css:
#topLeft
{
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopLeftCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->);
background-repeat: no-repeat;
position: absolute;
left: 15px;
top: 15px;
width: 41px;
height: 42px;
}
#topCenter
{
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Top.bmp">http://t1gsoftware.brinkster.net/images/Top.bmp</a><!-- m -->);
background-repeat: repeat-x;
position: absolute;
top: 15px;
left: 57px;
right: 61px;
height: 42px;
}
#topRight
{
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopRightCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->);
background-repeat: no-repeat;
position: absolute;
top: 15px;
right: 15px;
height: 42px;
width: 46px;
}
The topLeft and topRight div's work as expected, they are both positioned 15px in from the borders, however the topCenter isn't positioned (or as I suspect, isn't given any width) properly in IE 6. Firefox 1.0 displays it correctly (or as I see it correctly).
Does IE have a problem with calculating widths when both a left and a right property are given, or is it actually doing what it's supposed to do?
check t1gsoftware.brinkster.net/default.html (<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/default.html">http://t1gsoftware.brinkster.net/default.html</a><!-- m -->) for where I'm going with this look (I know the buttons are messed up right now
)
Thanks in advance for your help!
-JonTry adding 'width:auto;'.Nope.. didn't work
No effect.Can you post what you have so far (as opposed to what you want it to look like)?I thought I did.. that little snippet on the first post, that's what I have so far.. not sure what else you want.Originally posted by that1guy
I thought I did.. that little snippet on the first post, that's what I have so far.. not sure what else you want.
he's asking if you have an address for where you have the code being used that you provided. This will allow ppl to see physically what is messing up.Ahh.. well that's easy:
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/default2.html">http://t1gsoftware.brinkster.net/default2.html</a><!-- m -->
Works properly in FF, not in IE 6. One note though, if in the #topCenter style, I remove the HEIGHT property, it won't work in FF either. -shrug- Maybe that's a clue. I've read several CSS books (my favorite being the O'reilly book) and even had the css validated as at least being correct (doesn't mean it'll work like i think it should, but it's atleast syntactically correct). Shouldn't setting a left value and a right value force the user agent to calculate the width based on those values?OK. I don't know why IE is so bad. Logically, what you have should work - as it does in Firefox - but IE... I don't know - piece of junk.
You can do it another way though. This has slightly less code too, I think.
css
#top{
position:absolute;
top:15px;
left:15px;
right:15px;
width:auto;
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Top.bmp">http://t1gsoftware.brinkster.net/images/Top.bmp</a><!-- m -->);
background-repeat: repeat-x;
}
#topLeft{
float:left;
}
#topRight{
float:right;
}
html
<div id="top">
<img id="topLeft" src=http://www.webdeveloper.com/forum/archive/index.php/"http://t1gsoftware.brinkster.net/images/TopLeftCorner.bmp" width="41" height="42" alt="" />
<img id="topRight" src=http://www.webdeveloper.com/forum/archive/index.php/"http://t1gsoftware.brinkster.net/images/TopRightCorner.bmp" width="41" height="42" alt="" />
</div>
I hope this helps.So close!!
I've updated the code but it still isn't working in IE, although it's really close. Now there's a 2 or 3 pixel strip on either side of the images showing. I've added padding: 0px; and margin: 0px to ALL the style rules, including one for BODY, and nothing worked. Of course, it still works just fine in FF.
Time to start <!-- w --><a class="postlink" href="http://www.boycotIE.org">www.boycotIE.org</a><!-- w -->!
#topLeft{
float:left;
margin:0px; /* If zero doesn't work then try -2 */
}
Hopefully that should help. In my experience, it's best to put padding and margins on everything, so the browsers dont do anythng default. I think IE has a default margin for some elements.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">That worked.. I tried the same technique for the bottom "border" and it works, but now I can't get the left and right "borders" working. I just can't beleive that after this many years, Microsoft still can't get it right. I've added every <!DOCTYPE tag I could find to get it to work properly and nada, nothing.
I hate to say it, but I'm going to re-do it with frames. The look is too important to my customer to compromise so I gotz to do what I gotz to do.
Thank you very much for your help! Maybe some day microsoft can learn to place nice with standards.
Of course, I'm still open to me using the css wrong, but everything (INCLUDING MSDN) says I'm using it right and should get the results I want to get, but aren't getting it!
Anyway.. thank you again!
-JonCan you show me the images you're trying to use to do it?Sure.. the images are:
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopLeftCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Top.bmp">http://t1gsoftware.brinkster.net/images/Top.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopRightCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Left.bmp">http://t1gsoftware.brinkster.net/images/Left.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Right.bmp">http://t1gsoftware.brinkster.net/images/Right.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/BottomLeft.bmp">http://t1gsoftware.brinkster.net/images/BottomLeft.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/BottomRight.bmp">http://t1gsoftware.brinkster.net/images/BottomRight.bmp</a><!-- m -->
Not sure why those are showing up as links rather then the images.. but there they are..Is <!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/default.html">http://t1gsoftware.brinkster.net/default.html</a><!-- m --> the page you are refering to?
In my IE 6 it looks fine, side borders and all!
See here (<!-- m --><a class="postlink" href="http://www.vivxdesign.com/Shareaza/webdev1.jpg">http://www.vivxdesign.com/Shareaza/webdev1.jpg</a><!-- m -->)Well, I've tried and failed...
This (<!-- m --><a class="postlink" href="http://cheers-sendai.com/test/brinkster2.htm">http://cheers-sendai.com/test/brinkster2.htm</a><!-- m -->) is how far I got - it seems good in Firefox, but not in IE.
Good luck.No.. unfortunatly that's not the right one. That one uses tables for the layout.. and while it does work, it's using tables and the common wisdom these days is to use CSS instead. There's also another problem with it in that the center space doesn't size proportionatly with the edges of the screen so that page isn't usable. But.. that is the look I'm trying to get with a pure CSS implementation.I'm sorry? You're saying my page uses tables? Erm... wrong.
Have a look at the code - not one table in sight.
Edit :
Oh, I see... You were addressing Mercury7... Sorry.
Good luck anyway.BonRouge, thank you for trying. I'm not giving up on this but I do have a project deadline comming up so I'm just going to fall back to frames. When I find something that works, I'll post it. Thank you again!
-JonSorry BonRouge, we musta crossed paths just there
<html><head><link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"css/rkpropertyservices2.css"></head>
<body>
<div id="topLeft"></div>
<div id="topCenter"></div>
<div id="topRight"></div>
</body></html>
and the css:
#topLeft
{
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopLeftCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->);
background-repeat: no-repeat;
position: absolute;
left: 15px;
top: 15px;
width: 41px;
height: 42px;
}
#topCenter
{
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Top.bmp">http://t1gsoftware.brinkster.net/images/Top.bmp</a><!-- m -->);
background-repeat: repeat-x;
position: absolute;
top: 15px;
left: 57px;
right: 61px;
height: 42px;
}
#topRight
{
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopRightCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->);
background-repeat: no-repeat;
position: absolute;
top: 15px;
right: 15px;
height: 42px;
width: 46px;
}
The topLeft and topRight div's work as expected, they are both positioned 15px in from the borders, however the topCenter isn't positioned (or as I suspect, isn't given any width) properly in IE 6. Firefox 1.0 displays it correctly (or as I see it correctly).
Does IE have a problem with calculating widths when both a left and a right property are given, or is it actually doing what it's supposed to do?
check t1gsoftware.brinkster.net/default.html (<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/default.html">http://t1gsoftware.brinkster.net/default.html</a><!-- m -->) for where I'm going with this look (I know the buttons are messed up right now
)Thanks in advance for your help!
-JonTry adding 'width:auto;'.Nope.. didn't work
No effect.Can you post what you have so far (as opposed to what you want it to look like)?I thought I did.. that little snippet on the first post, that's what I have so far.. not sure what else you want.Originally posted by that1guy I thought I did.. that little snippet on the first post, that's what I have so far.. not sure what else you want.
he's asking if you have an address for where you have the code being used that you provided. This will allow ppl to see physically what is messing up.
Ahh.. well that's easy:<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/default2.html">http://t1gsoftware.brinkster.net/default2.html</a><!-- m -->
Works properly in FF, not in IE 6. One note though, if in the #topCenter style, I remove the HEIGHT property, it won't work in FF either. -shrug- Maybe that's a clue. I've read several CSS books (my favorite being the O'reilly book) and even had the css validated as at least being correct (doesn't mean it'll work like i think it should, but it's atleast syntactically correct
). Shouldn't setting a left value and a right value force the user agent to calculate the width based on those values?OK. I don't know why IE is so bad. Logically, what you have should work - as it does in Firefox - but IE... I don't know - piece of junk.You can do it another way though. This has slightly less code too, I think.
css
#top{
position:absolute;
top:15px;
left:15px;
right:15px;
width:auto;
background-image: url(<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Top.bmp">http://t1gsoftware.brinkster.net/images/Top.bmp</a><!-- m -->);
background-repeat: repeat-x;
}
#topLeft{
float:left;
}
#topRight{
float:right;
}
html
<div id="top">
<img id="topLeft" src=http://www.webdeveloper.com/forum/archive/index.php/"http://t1gsoftware.brinkster.net/images/TopLeftCorner.bmp" width="41" height="42" alt="" />
<img id="topRight" src=http://www.webdeveloper.com/forum/archive/index.php/"http://t1gsoftware.brinkster.net/images/TopRightCorner.bmp" width="41" height="42" alt="" />
</div>
I hope this helps.So close!!
I've updated the code but it still isn't working in IE, although it's really close. Now there's a 2 or 3 pixel strip on either side of the images showing. I've added padding: 0px; and margin: 0px to ALL the style rules, including one for BODY, and nothing worked. Of course, it still works just fine in FF.
Time to start <!-- w --><a class="postlink" href="http://www.boycotIE.org">www.boycotIE.org</a><!-- w -->!
#topLeft{float:left;
margin:0px; /* If zero doesn't work then try -2 */
}
Hopefully that should help. In my experience, it's best to put padding and margins on everything, so the browsers dont do anythng default. I think IE has a default margin for some elements.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">That worked.. I tried the same technique for the bottom "border" and it works, but now I can't get the left and right "borders" working. I just can't beleive that after this many years, Microsoft still can't get it right. I've added every <!DOCTYPE tag I could find to get it to work properly and nada, nothing.
I hate to say it, but I'm going to re-do it with frames. The look is too important to my customer to compromise so I gotz to do what I gotz to do.
Thank you very much for your help! Maybe some day microsoft can learn to place nice with standards.
Of course, I'm still open to me using the css wrong, but everything (INCLUDING MSDN) says I'm using it right and should get the results I want to get, but aren't getting it!
Anyway.. thank you again!
-JonCan you show me the images you're trying to use to do it?Sure.. the images are:
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopLeftCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Top.bmp">http://t1gsoftware.brinkster.net/images/Top.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/TopRightCorner.bmp">http://t1gsoftware.brinkster.net/images ... Corner.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Left.bmp">http://t1gsoftware.brinkster.net/images/Left.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/Right.bmp">http://t1gsoftware.brinkster.net/images/Right.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/BottomLeft.bmp">http://t1gsoftware.brinkster.net/images/BottomLeft.bmp</a><!-- m -->
<!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/images/BottomRight.bmp">http://t1gsoftware.brinkster.net/images/BottomRight.bmp</a><!-- m -->
Not sure why those are showing up as links rather then the images.. but there they are..Is <!-- m --><a class="postlink" href="http://t1gsoftware.brinkster.net/default.html">http://t1gsoftware.brinkster.net/default.html</a><!-- m --> the page you are refering to?
In my IE 6 it looks fine, side borders and all!
See here (<!-- m --><a class="postlink" href="http://www.vivxdesign.com/Shareaza/webdev1.jpg">http://www.vivxdesign.com/Shareaza/webdev1.jpg</a><!-- m -->)Well, I've tried and failed...
This (<!-- m --><a class="postlink" href="http://cheers-sendai.com/test/brinkster2.htm">http://cheers-sendai.com/test/brinkster2.htm</a><!-- m -->) is how far I got - it seems good in Firefox, but not in IE.
Good luck.No.. unfortunatly that's not the right one. That one uses tables for the layout.. and while it does work, it's using tables and the common wisdom these days is to use CSS instead. There's also another problem with it in that the center space doesn't size proportionatly with the edges of the screen so that page isn't usable. But.. that is the look I'm trying to get with a pure CSS implementation.I'm sorry? You're saying my page uses tables? Erm... wrong.
Have a look at the code - not one table in sight.
Edit :
Oh, I see... You were addressing Mercury7... Sorry.
Good luck anyway.BonRouge, thank you for trying. I'm not giving up on this but I do have a project deadline comming up so I'm just going to fall back to frames. When I find something that works, I'll post it. Thank you again!
-JonSorry BonRouge, we musta crossed paths just there