12 replies [Last post]
chiefsaab
chiefsaab's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+4
Joined: 2004-10-10
Posts: 14
Points: 0

Hi

I got a nice wordpress theme and modified it a bit to suit my needs. Everything is fine in almost all the browsers except IE6 which spoils the whole stuff. Even the original theme is messed up in IE6. So I guess the culprit is not me.

TWO PROBLEMS:
1: The site is appearing in frames in IE6.
2: Some gap is appearing below the tabs and the contents.

My site address is http://vpblog.co.cc

Here is the IE6-specific stylesheet:

/*  
 
styleie
 
*/
 
* { padding: 0; margin: 0; }
 
body {
	background: #3f3534 url(images/topbg.gif) no-repeat center 14px;
	font-family: Arial, Verdana;
}
 
a {
 text-decoration: none;
	color: #2a91b9;
}
 
img {
	border-style: none;
}
 
h3 {
	color: #36afdc;
	font: normal 18px Arial;
	text-decoration: none;
	margin-left: 10px;
	margin-bottom: 10px;
}
#wrapper { 
 margin: 0 auto;
 width: 828px;
}
#main_content {
 margin-bottom: 10px;
 overflow: auto;
	width: 828px;
	display: block;
}
#header {
 color: #333;
 width: 828px;
 height: 150px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0px;
}
 
#header h1 {
	width: 264px;
	height: 45px;
	float: left;
	overflow: hidden;
	text-indent: -2000px;
	margin-top: 50px;
	margin-left: 50px;
	display: inline;
}
 
#header h1 a {
	width: 264px;
	height: 45px;
	float: left;
}
 
#header ul.tabs {
	width: 440px;
	clear: both;
	height: 33px;
	overflow: hidden;
	margin-top: 22px;
	margin-left: 27px;
	float: left;
	display: inline;
}
 
#header ul.tabs li {
	overflow: hidden;
	float: left;
	width: 140px;
	height: 22px;
	margin-right: 3px;
	background: url(images/tabbg.png) no-repeat;
	text-align: center;
	font-family: verdana;
	color: #4b4b4b;
	padding-top: 11px;
	list-style-type: none;
}
 
#header ul.tabs li a {
	font-family: verdana;
	color: #4b4b4b;
	text-decoration: none;
	overflow: hidden;
	list-style-type: none;
}
 
#header ul.tabs li a:hover {
	color: #36afdc;
}
 
#header ul.tabs li.middle {
	overflow: hidden;
	float: left;
	width: 140px;
	height: 22px;
	margin-right: 4px;
	background: url(images/tabbg.png) no-repeat;
	text-align: center;
	font-family: verdana;
	color: #4b4b4b;
	padding-top: 11px;
	list-style-type: none;
}
 
#content { 
 float: left;
 color: #333;
 margin: 0;
 padding: 0px;
 width: 590px;
 display: inline;
 position: relative;
}
 
#content .top {
	width: 500px;
	height: 15px;
	float: left;
	background: url(images/content_top.png) no-repeat;
	display: inline;
	margin: 0;
	padding: 0;
}
 
#content .bottom {
	width: 590px;
	height: 17px;
	float: left;
	background: url(images/content_bottom.png) no-repeat;
	display: inline;
	margin: 0;
	padding: 0;
}
 
.main_post {
	width: 560px;
	float: left;
	background: url(images/content_main.png) repeat-y;
	display: inline;
	margin-top: 0px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
}
 
.main_post .post {
	width: 560px;
	float: left;
	margin-bottom: 8px;
	border-bottom: 2px solid #e8e8e8;
	padding-bottom: 8px;
}
 
.main_post .title a {
	color: #36afdc;
	font: normal 20px Arial;
	margin-top: 0;
	margin-bottom: 3px;
}
 
.main_post .date {
	color: #d2d2d2;
	font: 12px Arial;
}
 
.main_post .date a {
	color: #d2d2d2;
	text-decoration: none;
}
 
.main_post .content {
	color: #7e7c7c;
	font: 12px "Trebuchet MS";
	margin-top: 15px;
}
 
.main_post blockquote {
	background-image: url(images/bquote.gif);
	background-repeat: no-repeat;
	background-position: left 10px;
	padding-left: 40px;
	clear: both;
	padding-top: 12px;
	padding-bottom: 10px;
	margin-right: 15px;
	margin-top: 0;
	margin-left: 9px;
}
 
.main_post .content p {
	margin-bottom: 10px;
	line-height: 17px;
}
 
.main_post .content a {
	color: #36afdc;
	font-weight: normal;
	font-style: normal;
	text-decoration: underline;
}
 
.main_post .content a:hover {
	text-decoration: none;
	color: #2c93b9;
}
 
.main_post .comments {
	background: url(images/comment_guy.gif) no-repeat;
	padding-left: 32px;
	color: #3f3f3f;
	font: bold 11px Arial;
	padding-top: 8px;
	padding-bottom: 4px;
	margin-top: 5px;
	float: left;
}
 
.main_post .comments a {
	color: #3f3f3f;
	font: bold 11px Arial;
}
 
.navigation {
	width: 560px;
	float: left;
	padding: 0;
	margin-bottom: 0;
	margin-top: 3px;
}
 
.navigation a {
	color: #515151;
	text-decoration: underline;
	font: bold 12px georgia;
}
 
.navigation a:hover {
	color: #515151;
	text-decoration: none;
	font: italic bold 12px georgia;
}
 
.navigation .alignleft {
	float: left;
	width: 200px;
	text-align: left;
}
 
.navigation .alignright {
	float: right;
	width: 200px;
	text-align: right;
}
 
#sidebar { 
 display: inline;
 color: #333;
 margin: 0;
 padding: 0;
 width: 228px;
 float: right;
clear: left;
}
 
.side_con {
	width: 228px;
	margin-bottom: 8px;
	float: left;
	display: inline;
}
 
.side_con h2 {
	color: #464040;
	font: 17px "Trebuchet MS";
	text-align: center;
	margin-bottom: 5px;
}
 
.side_con ul.cat {
	width: 206px;
	float: left;
	overflow: hidden;
	margin-left: 3px;
}
 
.side_con .rss {
	margin-top: 5px;
	float: left;
	text-align: center;
	width: 210px;
}
 
.side_con ul.cat li {
	overflow: hidden;
	list-style-type: none;
	width: 206px;
	height: 30px;
	background: url(images/cat.gif) no-repeat;
	text-align: center;
	color: white;
	font: bold 16px arial;
	margin-bottom: 3px;
}
 
.side_con ul.cat li a {
	overflow: hidden;
	list-style-type: none;
	width: 206px;
	height: 23px;
	text-align: center;
	color: white;
	font: bold 16px arial;
	background-repeat: no-repeat;
	display: block;
	margin-top: 0;
	padding-top: 7px;
}
 
.side_con ul.cat li a:hover {
	overflow: hidden;
	list-style-type: none;
	background: url(images/cat_over.gif) no-repeat;
	text-align: center;
	color: white;
	font: bold 16px arial;
}
 
.side_con ul.recent {
	float: left;
	font: 12px "Trebuchet MS";
	color: #393939;
	overflow: hidden;
	margin-left: 3px;
	padding-left: 15px;
}
 
.side_con ul.recent li {
	float: left;
	font: 11px "Trebuchet MS";
	color: #393939;
	margin-bottom: 6px;
	list-style-type: square;
	list-style-position: outside;
	margin-left: 0;
}
 
.side_con ul.recent li a {
	color: #393939;
	text-decoration: none;
	margin-left: -5px;
	font-size: 11px;
	margin-top: 1px;
}
 
.side_con ul.recent li a:hover {
	color: #36afdc;
	text-decoration: none;
}
 
.side_con .top {
	background: url(images/sidebar_top.png) no-repeat;
	width: 228px;
	height: 17px;
	float: left;
}
 
.side_con .bottom {
	background: url(images/sidebar_bottom.png) no-repeat;
	width: 228px;
	height: 17px;
	float: left;
}
 
.side_con .mid {
	background: url(images/sidebar_mid.png) repeat-y;
	width: 212px;
	float: left;
	display: inline;
	padding-left: 8px;
	padding-right: 8px;
}
 
.searchbase {
	width: 155px;
	height: 32px;
	float: left;
	margin-left: 8px;
	color: #fff;
	font: 12px Arial;
}
 
.button {
	float: right;
	width: 30px;
	height: 26px;
	margin-right: 8px;
	margin-top: 2px;
}
 
.searchbase .searchin {
	width: 150px;
	background: url(images/searchbg.gif) no-repeat;
	border-style: none;
	padding-left: 5px;
	padding-top: 8px;
	padding-bottom: 9px;
	color: #3f3534;
	font: bold 13px Arial;
}
 
h3#comments {
	float: left;
	width: 560px;
	color: #36afdc;
	font: 17px Arial;
	padding: 0;
	margin: 15px 0 0;
}
 
h3#respond {
	float: left;
	width: 560px;
	color: #36afdc;
	font: 17px Arial;
	padding: 0;
	margin: 15px 0 0;
}
 
ol.commentlist {
	float: left;
	width: 95%;
	font: 12px/17px Verdana;
	color: #414141;
	margin-right: 0;
	margin-top: 5px;
	margin-bottom: 0;
	overflow: hidden;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}
 
ol.commentlist a {
	color: #36afdc;
	text-decoration: none;
}
 
ol.commentlist li {
	margin-bottom: 10px;
	border: 1px solid #dadada;
	padding: 7px 5px 8px 90px;
	overflow: hidden;
	background: url(images/icon.png) no-repeat;
}
 
ol.commentlist li p {
	width: 100%;
}
 
#commentform {
	width: 100%;
	float: left;
}
 
#commentform textarea#comment {
	width: 500px;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid #999;
}
 
#commentform input {
	border: 1px solid #999;
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 2px;
}
 
#commentform input#submit {
	padding: 5px;
	background-color: #36afdc;
	color: white;
	border-style: none;
}
.clear { clear: both; background: none; }
 
.footer {
	width: 590px;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #a09999;
	font: 12px "Trebuchet MS";
	text-align: center;
	float: left;
	display: inline;
}
 
.footer a {
	color: #a09999;
	text-decoration: underline;
}
 
.footer a:hover {
	color: #a09999;
	text-decoration: none;
}

I may be wrong, but that's how I learn!

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 1 year 5 weeks ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

Validate your code first. It

Validate your code first: http://validator.w3.org/

It looks like one or more of the DIVs is not closed properly, possibly the wrapper div. Also, the doctype is HTML 4.01, but some of the code is written in XHTML.

DIVs that aren't closed properly really throw off IE6, so make sure it's not that first.

~Soundscape
www.kenlange.com

chiefsaab
chiefsaab's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+4
Joined: 2004-10-10
Posts: 14
Points: 0

Thanx for the reply

Thanx for the reply soundscape. I tried to work out some of the errors but still stuck at a couple of places. Could you please see and suggest what I should do it get it fixed?

May thanx in advance
Max

I may be wrong, but that's how I learn!

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 1 year 5 weeks ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

What a mess. You are

What a mess.

You are missing and the #wrapper and #main_content are not closed out correctly.

The end of your code should be:

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

Modify styleie.css:
Add overflow: hidden; to #sidebar
Add margin-bottom: -1px; to .side_con .top

Modify style.css
Add margin-top: 117px; #header ul.tabs

Change this:

Sardar: Oye tumhein nai pata aaj kal bluetooth kitna mashoor hae?

should be:

Sardar: Oye tumhein nai pata aaj kal bluetooth kitna mashoor hae?

There's an extra

. Get rid of it. It's around the entry "July 19th, 2008 blah blah blah..."

That will get you headed in the right direction, but it's going to cause some other problems in IE6. That template is really screwed up and a good example of how NOT to code a site, as well as divits: http://csscreator.com/?q=divitis

~Soundscape
www.kenlange.com

chiefsaab
chiefsaab's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+4
Joined: 2004-10-10
Posts: 14
Points: 0

I am almost there, thanx to

I am almost there, thanx to you. I have checked and presently, or to at least my eyes, there isn't any problem left. The only thing is that in IE6, there is slight gap between the three tabs and the headline. I tried to bridge that gap, but as usual, to no avail Sad

I may be wrong, but that's how I learn!

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 1 year 5 weeks ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

Try the height:1% trick:

Try the height:1% trick: http://www.communitymx.com/content/article.cfm?page=2&cid=c37E0

I wouldn't use the hack, but put the height:1% on the problematic box/div in the external style sheet for IE.

To help find the problematic div, look through the code, and put {border: 1px solid red;} on each div until you find the problem div.

You can also put * {border: 1px solid red;} at the end of your style sheet to see the borders for all elements for testing purposes. Sometimes this really screws up the layout in IE, but at the same time, it will show you were the borders for all elements are which can be extremely helpful.

Peace.

~Soundscape
www.kenlange.com

chiefsaab
chiefsaab's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+4
Joined: 2004-10-10
Posts: 14
Points: 0

The problematic div

The problematic div is:

#content .top {
	width: 590px;
	height: 15px;
	float: left;
	background: url(images/content_top.png) no-repeat;
	display: inline;
	margin: 0px;
	padding: 0px;
}

I tried height trick but it did not work. I even removed the height property altogether but still it did not help. Below the #content .top is the following div:

 
#content { float: left;
 color: #333;
 margin: 0px;
 padding: 0px;
 width: 590px;
 display: inline;
 position: relative;
}

I may be wrong, but that's how I learn!

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 1 year 5 weeks ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

In the main stylesheet, for

In the main stylesheet, for the class .main_post
change margin-top: 0
to
margin-top: -3px;

FYI-For future reference, whoever put styleie.css above style.css in the html, this is incorrect. Overrides go after the other style sheet. But it looks like they didn't code things right from the beginning, so if you do this now, you would have to redo styleie.css correctly.

~Soundscape
www.kenlange.com

chiefsaab
chiefsaab's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+4
Joined: 2004-10-10
Posts: 14
Points: 0

I have implemented your

I have implemented your suggestion, but still the gap is there. By the way, the change was supposed to be done in sytleie and not the "main stylesheet". Right?

I may be wrong, but that's how I learn!

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 1 year 5 weeks ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

No. Like I said in the

No. Like I said in the previous message, place it in the main style sheet.

styleie was not set up correctly by the person that built this template, so it won't work there.

~Soundscape
www.kenlange.com

chiefsaab
chiefsaab's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+4
Joined: 2004-10-10
Posts: 14
Points: 0

Done and finally it's over.

Done and finally it's over. Everything looks in place now. I don't have enough words to thank you for your time and tips. So very nice of you. By the way, if you don't mind, could you please explain why your last tip needed to be put in the main style as the problem was only in IE6 and it was being fed IE6-specific stylesheet and not the main stylesheet?

I may be wrong, but that's how I learn!

soundscape
soundscape's picture
Offline
Enthusiast
Kansas City Metro
Last seen: 1 year 5 weeks ago
Kansas City Metro
Timezone: GMT-7
Joined: 2007-10-18
Posts: 188
Points: 0

No problem. >>could you

No problem.

>>could you please explain why your last tip needed to be put in the main style as the problem was only in IE6 and it was being fed IE6-specific stylesheet and not the main stylesheet?

If you look at the source code, styleie.css appears before style.css. This is incorrect. Overrides work because they appear after the other css. Basically, whatever appears last has precedence; this applies with a css file itself as well. The technical term is specificity.

The styles that are in styleie.css that are working, must be unique to that style sheet. IE6 often needs things that aren't required for other browsers. The style that I just had you changed, does exist in style.css, so even if you put it in styleie.css, it will be overridden by that same style in style.css, which has higher specificity.

The problem with putting the link to styleie.css after style.css at this point, is that it was done wrong to begin with, so you would run into additional problems that need fixing within styleie.css. It is what you really should do for the code to be correct, but that would more time.

Read about specificity here:
http://htmldog.com/guides/cssadvanced/specificity/

~Soundscape
www.kenlange.com

chiefsaab
chiefsaab's picture
Offline
Regular
Last seen: 12 years 15 weeks ago
Timezone: GMT+4
Joined: 2004-10-10
Posts: 14
Points: 0

Thanx a lot again for the

Thanx a lot again for the details, soundscape. I learnt quite a few things from this thread. So nice of you Smile

I may be wrong, but that's how I learn!