...

View Full Version : compatibility issue



justbreathe
04-02-2011, 02:06 AM
It's supposed to look like this: http://i53.tinypic.com/5v826g.jpg
but it looks like this in IE + Mozilla http://i53.tinypic.com/2akbx2e.jpg

I used google chrome to test the layout but the links in the divider and frame div are not aligning like they should in IE + Mozilla. Ignore the banner text area. There's actually supposed to be a banner there but I will get back to that later. I verified the code and passed. There were only 2 warnings and I have no idea what either of them mean.

1)No Character encoding declared at document level.
2)Using Direct Input mode: UTF-8 character encoding assumed


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Site Title</title>
<style type="text/css">

body {
background-color:#d9e0cf;
font-family:Verdana, Geneva, sans-serif; }

#banner {
position:absolute;
top:0px;
left:0px;
background-color:#6b6b6b;
width:1024px;
height:150px; }

#divider {
position:absolute;
top:150px;
left:0px;
border-top:1px solid #757575;
border-bottom:1px solid #757575;
background-color:#3e3e3e;
width:1024px;
height:50px;
overflow:hidden; }

a.jb:link, a.jb:visited {
display:block;
float:left;
color:#dfdfdf;
font-weight:normal;
text-decoration:none;
font-size:20px; }

a.jb:hover, a.jb:active {
color:#909090; }

a.jb:first-letter {
font-size:35px; }

#nav-align {
display:inline-table;
margin:0 auto;
padding-top:2px; }

#content-wrapper {
position:absolute;
top:201px;
left:0px;
width:1024px;
overflow:auto; }

#content-wrapper h1 {
padding-left:31px;
background-color:#839964;
font-size:25px;
font-weight:normal;
text-decoration:none;
color:#272727;
letter-spacing:1px;
margin-top:5px;
margin-bottom:5px; }

#left-box {
float:left;
width:646px;
overflow:auto;
font-size:11px;
color:#000000; }

#right-box {
text-align:center;
background-color:#eff2ec;
border:2px solid #787e72;
float:right;
width:374px;
overflow:auto;
font-size:10px;
color:#000000; }

#frame {
overflow:hidden;
width:100%;
height:420px; }

.in {
padding-left:5px;
padding-right:5px; }

.frame-box {
width:100%;
height:420px;
overflow:auto; }

a.just:link, a.just:visited {
display:block;
float:left;
width:100px;
text-align:center;
line-height:20px;
font-size:11px;
font-weight:normal;
text-decoration:none;
background-color:#a3a3a3;
border:1px solid #272727;
color:#000000;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; }

a.just:hover, a.just:active {
background-color:#454545;
color:#d8decf; }

.framelink-align {
display:inline-table;
margin:0 auto;
padding-top:5px;
margin-bottom:5px; }

#left-box h1 {
padding:0px;
text-align:center;
background-color:#787e72;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:#000000;
margin-top:5px;
margin-bottom:5px;
text-transform:lowercase;
letter-spacing:0px; }

#banner-text {
padding-top:50px;
padding-right:10px;
font-size:95px;
text-align:right;
text-transform:lowercase; }

#g, #l {
margin-right:5px; }

#ya, #yo, #yu, #yi, #ye, #yy, #za {
padding-right:28px; }
</style>
</head>
<body>
<div id="banner"><div id="banner-text">banner</div></div>

<div id="divider"><div id="nav-align">
<a class="jb" id="ya" href="URL">Home</a>
<a class="jb" id="yo" href="URL">About Me</a>
<a class="jb" id="yu" href="URL">Premades</a>
<a class="jb" id="yi" href="URL">Tutorials</a>
<a class="jb" id="ye" href="URL">Pixels</a>
<a class="jb" id="yy" href="URL">Templates</a>
<a class="jb" id="za" href="URL">Credits</a>
<a class="jb" href="URL">Affiliates</a>
</div></div>

<div id="content-wrapper">
<h1>Main Header</h1>

<div id="left-box">
<h1>Left Box Header</h1>
<div class="in">
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
</div></div>



<div id="right-box"><div id="frame">

<a name="news"></a><div class="frame-box"><div class="in"><div class="framelink-align">
<a class="just" id="g" href="#news">News</a>
<a class="just" href="#updates">Updates</a>
</div>
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
</div></div>

<a name="updates"></a><div class="frame-box"><div class="in"><div class="framelink-align">
<a class="just" id="l" href="#news">News</a>
<a class="just" href="#updates">Updates</a>
</div>
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
</div></div>

</div></div>




</div>
</body>
</html>

BulletTimeBill
04-02-2011, 05:04 AM
Not really a compatibility issue, that second pic is how it should be. <a> is an inline element.
Couple of options:
Surround those anchors with a div (block level element)
.just{display:block;} to turn to turn them into block level elements (although this will put them under each other)
Surround the text in it's own div (it should be inside <p> anyway, which will also probably fix it.
As for the scroll bars it means something has fallen outside the window so either fiddle around re-sizing, or quick fix overflow:hidden; on the offending element.

Also google to double check what I just said on block and inline elements, i may be wrong but am too lazy to do it myself. It's stuff you still need to learn about anyway.

justbreathe
04-02-2011, 06:25 AM
I was able to fix the links in the little box but I'm still having an issue with the top links. I added a div around it and set it to display:block; and that din't seem work. Any ides on what else I can do to fix them?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Site Title</title>
<style type="text/css">

body {
background-color:#d9e0cf;
font-family:Verdana, Geneva, sans-serif; }

#banner {
position:absolute;
top:0px;
left:0px;
background-color:#6b6b6b;
width:1024px;
height:150px; }

#divider {
position:absolute;
top:150px;
left:0px;
border-top:1px solid #757575;
border-bottom:1px solid #757575;
background-color:#3e3e3e;
width:1024px;
height:50px;
overflow:hidden; }

a.jb:link, a.jb:visited {
float:left;
color:#dfdfdf;
font-weight:normal;
text-decoration:none;
font-size:20px; }

a.jb:hover, a.jb:active {
color:#909090; }

a.jb:first-letter {
font-size:35px; }

#nav-align {
margin:0 auto;
padding-top:2px; }

#content-wrapper {
position:absolute;
top:201px;
left:0px;
width:1024px;
overflow:auto; }

#content-wrapper h1 {
padding-left:31px;
background-color:#839964;
font-size:25px;
font-weight:normal;
text-decoration:none;
color:#272727;
letter-spacing:1px;
margin-top:5px;
margin-bottom:5px; }

#left-box {
float:left;
width:646px;
overflow:auto;
font-size:11px;
color:#000000; }

#right-box {
text-align:center;
background-color:#eff2ec;
border:2px solid #787e72;
float:right;
width:374px;
overflow:auto;
font-size:10px;
color:#000000; }

#frame {
overflow:hidden;
width:100%;
height:420px; }

.in {
padding-left:5px;
padding-right:5px; }

.frame-box {
width:100%;
height:420px;
overflow:auto; }

a.just:link, a.just:visited {
float:left;
width:100px;
text-align:center;
line-height:20px;
font-size:11px;
font-weight:normal;
text-decoration:none;
background-color:#a3a3a3;
border:1px solid #272727;
color:#000000;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; }

a.just:hover, a.just:active {
background-color:#454545;
color:#d8decf; }

.framelink-align {
display:inline-block;
margin:0 auto;
padding-top:5px;
margin-bottom:5px; }

#left-box h1 {
padding:0px;
text-align:center;
background-color:#787e72;
font-size:15px;
font-weight:bold;
text-decoration:none;
color:#000000;
margin-top:5px;
margin-bottom:5px;
text-transform:lowercase;
letter-spacing:0px; }

#banner-text {
padding-top:50px;
padding-right:10px;
font-size:95px;
text-align:right;
text-transform:lowercase; }

#g, #l {
margin-right:5px; }

#ya, #yo, #yu, #yi, #ye, #yy, #za {
padding-right:28px; }

p {
margin-top:0px; }

.wrap {
display:block; }
</style>
</head>
<body>
<div id="banner"><div id="banner-text">banner</div></div>

<div id="divider"><div id="nav-align"><div class="wrap">
<a class="jb" id="ya" href="URL">Home</a>
<a class="jb" id="yo" href="URL">About Me</a>
<a class="jb" id="yu" href="URL">Premades</a>
<a class="jb" id="yi" href="URL">Tutorials</a>
<a class="jb" id="ye" href="URL">Pixels</a>
<a class="jb" id="yy" href="URL">Templates</a>
<a class="jb" id="za" href="URL">Credits</a>
<a class="jb" href="URL">Affiliates</a>
</div></div></div>

<div id="content-wrapper">
<h1>Main Header</h1>

<div id="left-box">
<h1>Left Box Header</h1>
<div class="in"><div class="wrap"><p>
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
left box text goes here left box text goes here left box text goes here left box text goes here
</p></div></div></div>



<div id="right-box"><div id="frame">

<a name="news"></a><div class="frame-box"><div class="in"><div class="framelink-align">
<a class="just" id="g" href="#news">News</a>
<a class="just" href="#updates">Updates</a>
</div>
<div class="wrap"><p>
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
news text goes here news text goes here news text goes here news text goes here news text goes here
</p></div></div></div>

<a name="updates"></a><div class="frame-box"><div class="in"><div class="framelink-align">
<a class="just" id="l" href="#news">News</a>
<a class="just" href="#updates">Updates</a>
</div>
<div class="wrap"><p>
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
updates text goes here updates text goes here updates text goes here updates text goes here
</p></div></div></div>

</div></div>




</div>
</body>
</html>

BulletTimeBill
04-02-2011, 06:34 AM
Ah, right, my bad, you had a div around the anchors but they're floated. Floating can mess things up when you don't know it very well. Add a height to your "framelink-align" div. When an element is floated it will not "fill" a div. When rendering that divs height will be 0. Add a height of 30px or something like that.

justbreathe
04-02-2011, 06:53 AM
I am so confused. Okay, I added the height to framelink-align. There is still a problem with the top links inside the #divider. I also used the float property on the links jb so I added a height to the div around it (nav-align) and it din't really fix anything. Also, should I have put the links in an unordered list instead?

So anytime I use the float property, I need to set a height?

BulletTimeBill
04-02-2011, 08:43 AM
Again, my bad :P I didn't even notice a problem with those top links. Have you got this site uploaded anywhere? Is it just that they are too far apart? I can't spot where that is coming from 28px for the padding isn't a lot :/ so i'm not sure.
Oh and for your character encoding add this

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
inside your <head>. Character encoding is important, look into it some time. But really that's all you'll need.

justbreathe
04-02-2011, 08:51 AM
by the way thanks for taking the time to help me

I uploaded the site here:
http://obsidianskies.webs.com/hghgghg.htm

It looks fine in google chrome. In Mozilla/IE the top links are spread out way too much (past the 28 pixels) and I have no idea what's causing it (like in the 2nd screenshot).

abduraooft
04-02-2011, 09:27 AM
I'd recommend you to check http://bonrouge.com/2c-hf-fluid%28r%29.php to see how to make a good 2 column layout.

SB65
04-02-2011, 09:50 AM
Seems to me like the spacing issue is related to the :first-letter pseudo-class. OK for me in IE8 but not in FF3.6.16.

Try assigning a width, centering the text and removing the right margin:


#ya, #yo, #yu, #yi, #ye, #yy, #za {
/*margin-right: 28px;*/
}
hghgghg.htm (line 149)
a.jb:link, a.jb:visited {
color: #DFDFDF;
float: left;
font-size: 20px;
font-weight: normal;
text-align: center;
text-decoration: none;
width: 120px;
}


That's probably a little better cross-browser anyway. I agree with abduraooft about your layout - you'll find it more flexible if you remove all that absolute positioning. Your menu also might be better expressed as an unordered list. I don't think any of this is relevant to your menu spacing issue though.

It seems, by experimentation, that the combination of an increased font-size for the first letter in combination with a floated element without a set width causes FF to give additional space to the element. I haven't tested this exhaustively, but this doesn't seem to happen in IE8 or Chrome or Opera. Googling doesn't find anything relevant either.

justbreathe
04-02-2011, 08:54 PM
I removed the absolute positioning and set the body margin and padding to 0 and then added the width to the links and that solved the problem. I will look into the site you mentioned :)

Thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum