Register or have you forgotten your password?
Get the most out of Surmunity, read our tips here! Need an interesting blog to read? You've got to read the Surpass Blog!
| Welcome! Please register to access all of our features.
December 17th, 2006, 10:16 PM
|
#1 (permalink) |
|
Surpass Fan
Comfy Contributor
Joined in Dec 2004
224 posts
Gave thanks: 6
Thanked 19 times
|
HTML/CSS Centering
http://www.out-burst.org/outbursttry2/
In Firefox, the centering of the header and footer images works fine in all resolutions. In IE7, the centering of the header and footer images works under a certain window size but then gets messed up... Any ideas? HTML for header Code:
<div id="header"></div> Code:
#header {
position:absolute;
top:0px;
width: 900px;
height: 133px;
left:50%;
margin-left: -450px;
background: transparent url(../images/header.jpg) no-repeat top;
}
Last edited by lonelydreamer; December 17th, 2006 at 10:18 PM.. |
|
    
|
|
December 17th, 2006, 10:35 PM
|
#2 (permalink) |
|
pineapples are sharp
Super #1
Joined in Dec 2005
5,777 posts
Gave thanks: 147
Thanked 151 times
|
I don't know if this would be causing problems but: Padding is spelt incorrectly
Code:
body {
background: #363942 url(../images/bg.jpg) repeat-y top center;
margin: 0;
paddign: 0;
text-align:left;
}
(why? transparent urls generally tell browsers to resize an image based on screen resolution... which isn't a good thing since websites are generally created with raster images, and any modification will create ragged edges) Code:
body {
background: #363942 url(../images/bg.jpg) repeat-y top center;
margin: 0;
paddign: 0;
text-align:left;
}
#header {
position:absolute;
top:0px;
width: 900px;
height: 133px;
left:50%;
margin-left: -450px;
background: transparent url(../images/header.jpg) no-repeat top;
}
#bottom {
position:absolute;
left: 50%;
width: 900px;
bottom: 0px;
margin-left: -450px;
height: 64px;
background: transparent url(../images/bottom.jpg) no-repeat top;
}
Since the header and footer are the same size I would change both lines that say: Code:
margin-left: -450px; Code:
margin: auto;
__________________
 poof
|
|
|
|
|
December 17th, 2006, 10:49 PM
|
#3 (permalink) | |
|
Surpass Fan
Comfy Contributor
Joined in Dec 2004
224 posts
Gave thanks: 6
Thanked 19 times
|
I changed the transparencies (thanks for the tip =) )
The margin thing threw off the whole template. But those changes still didn't fix the IE problem =( EDIT: I fixed it, I'm coding for joomla, so I was expecting to put in the doctype when I put it into the Joomla format, adding Quote:
Last edited by lonelydreamer; December 17th, 2006 at 10:59 PM.. |
|
|
|
|
|
December 17th, 2006, 11:08 PM
|
#5 (permalink) |
|
pineapples are sharp
Super #1
Joined in Dec 2005
5,777 posts
Gave thanks: 147
Thanked 151 times
|
eh I was reading your markup incorrectly so I didn't give the margin:auto; advice correctly... anyways it looks fine in FF1.5 IE7... IE6 the alignment is off but based on your post I don't think you are coding for Legacy IE.
__________________
poof
|
|
|
|
|
December 21st, 2006, 8:56 PM
|
#7 (permalink) |
|
Surpass Fan
Comfy Contributor
Joined in Dec 2004
224 posts
Gave thanks: 6
Thanked 19 times
|
Didn't want to create a new thread, but i have a new question. What would make:
Code:
<script type="Javascript">
startHover = function() {
if (document.all&&document.getElementById) {
hover = document.getElementsByTagName("div");
for (var i = 0; i < hover.length ; i++) {
if (hover[i].className == " item") {
hover[i].onmouseover = function() {
this.className = " over";
}
hover[i].onmouseout = function() {
this.className=this.className.replace(" over", " item");
}
}
}
}
}
window.onload=startHover;
</script>
Not work in IE6? The HTML is only Code:
<div class="item">I love hovers</div> Last edited by lonelydreamer; December 21st, 2006 at 8:59 PM.. |
|
|
|
