Need Help w/ 2 IE7 Rendering Problems
Regular
Posted: Sat, 2008-05-17 15:53
The site is www.javavideotutes.com/new_layout
I have valid XHTML 1.0 strict. Firefox displays the desired output.
Firstly, the tabs at the top are giving me trouble. All 5 tabs are contained in an absolutely positioned DIV with a "top" value and a "margin-left" value. It seems that IE7 is doing the margin-left from a different point than Firefox is. I have tried removing the corners of the tabs, which are rounded using Javascript, but they are still positioned the same in IE7. They also appear to use different "top" values as well.
Secondly, the Lessons table is weird in IE7. The table is comprised of a few styled DIVs. The duration text is "float"ed to the right inside each row. As you can see, IE7 does not extend the background gradient or border through this float. How can I make the floated DIV "transparent" so that it does not cover up the gradient or border?
Any help is greatly appreciated, and thank you!
==edit==
Sorry, I forgot to post my code:
CSS for the tabs, wrapper, and banner, and table:
/* Top Tabs */
#tabs {
position: absolute;
top: 78px;
margin-left: 328px;
width: 470px;
background-color: #311a05;
}
.tab_dark {
background-color: #5b310b;
float: left;
margin: 0 5px 0 5px;
padding: 3px 8px 3px 8px;
font-size: 18px;
color: #fff;
}
.tab_light {
background-color: #f0e6d0;
float: left;
margin: 0 5px 0 5px;
padding: 3px 8px 3px 8px;
font-size: 18px;
color: #6c2006;
}
.tab_dark a{
color: #fff;
font-size: 18px;
text-decoration: none;
}
.tab_light a{
color: #6c2006;
font-size: 18px;
text-decoration: none;
}
.tab_dark a:hover, .tab_light a:hover{
text-decoration: underline;
}
/* Banner Items */
#banner {
width: 100%;
background-image: url('../images/header_bg.png');
height: 106px;
}
#logo {
margin-left: 50px;
}
#slogan {
margin-left: 150px;
vertical-align: top;
}
/* Wrapper */
#wrapper {
width: 800px;
margin: 25px auto 25px auto;
background-color: #f0e6d0;
}
/* Lessons Table */
#tbl {
width: 100%;
border: 1px solid #846737;
}
#tbl a{
color: #73b2e9;
font-size: 15px;
font-weight: bold;
}
.tbl_row_salt {
background-color: #f0e6d0;
margin: auto 0;
border-bottom: 1px solid #846737;
height: 63px;
line-height:63px;
vertical-align: middle;
padding: 0 5px;
z-index: 2;
}
.tbl_row_pepper {
background-image: url('../images/table_row_bg.png');
margin: 0;
border-bottom: 1px solid #846737;
height: 63px;
line-height:63px;
vertical-align: middle;
padding: 0 5px;
z-index: 2;
}
.tbl_row_salt_last {
background-color: #f0e6d0;
margin: 0;
height: 63px;
line-height:63px;
vertical-align: middle;
padding: 0 5px;
z-index: 2;
}
.tbl_row_pepper_last {
background-image: url('../images/table_row_bg.png');
margin: 0;
height: 63px;
line-height:63px;
vertical-align: middle;
padding: 0 5px;
z-index: 2;
}
.tbl_row_header {
background-image: url('../images/table_header_bg.png');
margin: 0;
border-bottom: 1px solid #846737;
font-weight: bold;
color: #3c2006;
height: 27px;
line-height:27px;
vertical-align: middle;
padding: 0 5px;
z-index: 2;
}
.time_float {
float: right;
width: 150px;
line-height:60px;
vertical-align: middle;
padding: 0 5px;
font-weight: bold;
z-index: 1;
}And here is the XHTML (all of it)
<!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">
<head>
<title>Java Video Tutorials: Learn Java the easy way!</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Description" content="Java Video Tutorials - Learn Java the easy way! Just sit back, relax, and enjoy how easy it is to learn one of the greatest modern programming languages." />
<meta http-equiv="Author" content="Trevor Gau" />
<meta http-equiv="Copyright" content="© 2008 Trevor Gau" />
<meta http-equiv="Keywords" content="java, video, tutorials, java video tutorials, video tutorials, free java tutorials, learn java, easy java, free java video tutorials" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<!-- Import jQuery and jQuery.corner -->
<script type="text/javascript" src="/new_layout/lib/jquery.js"></script>
<script type="text/javascript" src="/new_layout/lib/jquery.corner.js"></script>
<!-- Add rounded corners to the tabs and the wrapper using jQuery.corner -->
<script type="text/javascript">
$(function(){
$("#wrapper").corner("15px");
$("div.tab_light").corner("top");
$("div.tab_dark").corner("top");
});
</script>
<!-- Holds everything, and is rounded with jQuery -->
<div id="wrapper">
<!-- Banner (logo, slogan, tabs) -->
<div id="banner">
<a href="?view=home"><img alt="JVT Logo" id="logo" src="/new_layout/images/logo.png" /></a>
<img alt="Kick back, have fun, and enjoy!" id="slogan" src="/new_layout/images/slogan.png" />
<!-- Holds all tabs and gives a solid background color -->
<div id="tabs">
<div class="tab_light"><a href="?view=home">Home</a></div>
<div class="tab_dark"><a href="?view=lessons">Lessons</a></div>
<div class="tab_dark"><a href="?view=assignments">Assignments</a></div>
<div class="tab_dark"><a href="?view=contact">Contact</a></div>
<div class="tab_dark"><a href="?view=about">About</a></div>
</div> <!--tabs-->
</div> <!--banner-->
<!-- Holds everything that's the light tan color -->
<div id="main">
<div id="pane_left">
<!-- Donation buttons -->
<img alt="Donate" class="header_left" src="/new_layout/images/side_make_donation.png" />
<img alt="Donate $20" class="donate_button" src="/new_layout/images/donate_20.png" />
<img alt="Donate $10" class="donate_button" src="/new_layout/images/donate_10.png" />
<img alt="Donate $5" class="donate_button" src="/new_layout/images/donate_5.png" />
<p> </p>
<!-- Helpful links -->
<img alt="Helpful links" class="header_left" src="/new_layout/images/side_helpful_links.png" />
<div id="helpful_links">
<a href="http://www.phpvideotutorials.com">PHP Video Tutorials</a>
Visit Leighmac to learn PHP with awesome video tutorials!
<a href="http://java.sun.com">Java Home</a>
Downloads, news, documentation, everything needed for the Java language
<a href="http://java.sun.com/javase/6/docs/api/">Java Documentation</a>
Direct link to the Java Documentation
<a href="http://www.knowledgetwee.com">Knowledge Twee</a>
Discuss individual lessons at Knowledge Twee, a social knowledge site by Leighmac.
<a href="http://www.shydex.com">ShyDex</a>
Promote your website!
</div> <!--helpful_links-->
<!-- Badges -->
<img alt="Site Badges" class="header_left" src="/new_layout/images/side_badges.png" />
<div class="badge">
<a href="http://www.drjava.org">
<img alt="Dr. Java Badge" src="/new_layout/images/badge_dr_java.png" />
</a>
</div> <!--badge-->
<div class="badge">
<a href="http://java.sun.com">
<img alt="Java Badge" src="/new_layout/images/badge_java.png" />
</a>
</div> <!--badge-->
<div class="badge">
<a href="http://www.shydex.com">
<img alt="ShyDex Badge" src="/new_layout/images/badge_shydex.png" />
</a>
</div> <!--badge-->
<div class="badge">
<a href="http://www.w3c.org">
<img alt="W3C Compliance Badge" src="/new_layout/images/badge_w3c.png" />
</a>
</div> <!--badge-->
</div> <!--pane_left-->
<div id="pane_right">
<div id="page_title">
Welcome to Java <strong>Video</strong> Tutorials!
</div> <!--page_title-->
<p>
All lessons on this site are <strong>100% free</strong>.
However, each new lesson will become available after every
$100 in donations. Right now, the first few lessons are
available, and when Java Video Tutorials receives its next
$100 in donations, a new tutorial will be released!
</p>
<p>
So what are you waiting for? As an incentive, I will give
advance access to the next lesson to anybody who donates
$5.00 or more. I will manually send you an email with a
link to the next tutorial upon receipt of your donation.
Please feel free to watch the <strong>free</strong> videos,
but most of all ENJOY!!
</p>
<div id="tbl">
<div class="tbl_row_header">Lessons</div>
<div class="time_float">16 min. 32 sec.</div>
<div class="tbl_row_salt">
<a href="/new_layout/lessons/lesson01/">
Lesson 01: Hello World!
</a>
</div> <!--tbl_row_salt-->
<div class="time_float">07 min. 20 sec.</div>
<div class="tbl_row_pepper">
<a href="/new_layout/lessons/lesson02/">
Lesson 02: Math
</a>
</div> <!--tbl_row_pepper-->
<div class="time_float">09 min. 11 sec.</div>
<div class="tbl_row_salt_last">
<a href="/new_layout/lessons/lesson03/">
Lesson 03: Bitwise Operators
</a>
</div> <!--tbl_row_salt_last-->
</div> <!--tbl-->
</div> <!--pane_right-->
</div> <!--main-->
<div class="clear_fix"> </div>
<div id="footer">
Site Copyright © 2008 Trevor Gau<br />
Design by <a href="http://www.phpnotepad.com">Leighmac</a>
</div> <!--footer-->
<div class="clear_fix"> </div>
</div> <!--wrapper-->
</body>
</html>Thanks again!
Trevor
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
Get rid of the javascript
Posted: Sat, 2008-05-17 18:00
Get rid of the javascript and see if that makes a difference.
Your menus are unsemantic and should be lists, as described at the Listamatic site.
A menu is a list of choices after all, and it belongs in a list element, usually UL.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Regular
Posts: 49
Joined: 2006-05-29
Hi Ed, Thanks for the reply.
Posted: Sat, 2008-05-17 18:13
Hi Ed,
Thanks for the reply. I have tried removing the Javascript, but the alignment is still the same for IE7. I did not know that menus like that were conventionally done using UL, so I will look into the link and modify my method if necessary.
Trevor
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
Well, when things are going
Posted: Sat, 2008-05-17 20:52
Well, when things are going wrong we peel back stuff until it works and then we have a better basis to work from. Removing the JS was an example of doing that.
But I missed where you said you were using absolute positioning. Whatever for? Your layout doesn't need AP, and you should never use AP unless nothing else will give you the effect you want, and then only sparingly.
Taking another look at your site I see no need for AP. Your top menu can be in the flow and you can use margins to avoid the graphics. Same with your footer.
IE is buggy, and real buggy with Absolute positioning.
Also, your site takes seemingly forever to load so it must be very heavy with something unnecessary. A page that size should load pretty well instantly over a wideband connection. It takes 15 seconds over my T1 speed fibre at work!
No one is going to wait around that long for your site to load ... and I shudder to think about folks still using modems. All in all you really need to lighten up that design. Or maybe you just need another ISP, I suppose.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
Ed's right, a menu is a
Posted: Sat, 2008-05-17 21:11
Ed's right, a menu is a list—by definition.
An absolute positioned (AP) element is placed relative to its nearest positioned ancestor, which should be the #banner. You just lucked out with the modern browsers. You need to make your reference container have position; the safest method being to make it {position: relative;}. Next, an AP element is shrink-wrapped naturally. Setting a width is more likely to cause breakage when font-size is increased, and that's true in this case. Then, since you want the tabs at the right, use the right property instead of a left margin.
#banner { position: relative; width: 100%; /*this is redundant and a potentially dangerous habit*/ background-image: url('../images/header_bg.png'); height: 106px; } #tabs { position: absolute; top: 78px; right: 0; background-color: #311a05; }cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
Second issue
Posted: Sat, 2008-05-17 21:21
So, why aren't you marking that up as a table? The left column holds titles, the right column holds times and each row is a separate record. That smells like a table to me.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
Guru
Posts: 2277
Joined: 2005-12-14
Location: Victoria British Columbia
Good point, Hugo. I
Posted: Sat, 2008-05-17 22:45
Good point, Hugo. I absolutely agree, not that this makes your point any more credible.
I could change my plea to guilty,
but I don't think it would stick.
Ed Seedhouse
Regular
Posts: 49
Joined: 2006-05-29
Thanks
Posted: Sun, 2008-05-18 03:04
Oh Ed, don't sell yourself short, now!
Thanks for the advice. I will implement some changes and post my results if I need more assistance. As for loading time, it takes about 3 seconds for the page to load for me, and I'm on DSL. Maybe my cheap host was bogged down at the time or something.