Need Help In Web Design Of Site

[darran 0]

Take a look at my site http://forums.xisto.com/no_longer_exists/

View it in Mozilla Firefox, it is fine. But view it in IE 7, you will notice the footer is making the site look disgusting. How can I solve this problem? Appparently, the footer starts after the post entry is ended, while in firefox, the footer starts after the end of the sidebar which is what I am trying to do. However I am not too sure how to do it in IE7. Can anyone advise me?

[TypoMage 0]

Try just getting rid of the footer.

[jlhaslip 4]

I had a look at the site, specifically the footer in IE6 and ff2. They are identical in all regards except the render of the blue is a bit different. Not a big deal. for the benefit of us who are waiting for a good IE Browser, could you post a screenie, please and thanks.

[darran 0]

I can't get rid of the footer, that would deal a huge loss to my site.

 

Here is the image

 

 

It is funny that IE6 doesn't have a problem and IE7 has.

Edited February 18, 2007 by darran (see edit history)

[MusicOnly 0]

I have viewed it only in FF2 and it s all ok. sorry but my ie doesnt work so i cant view it. btw, your site really looks nice! did you designed that template?

[delivi 0]

IE 7 has several CSS incompatabilities, I'll check the theme and get a solution for you, i'll be back soon.

[CrazyRob 0]

For some reason i cannot access your site i just get an error message saying "problem loading page" have you terminated your hosting account?

[matak 2]

#footer {		clear: both;	width: 100%;	height: 74px;	clear: both;	background: #010b32;	border-top: 1px solid #000;	color: #fff;	}

add clear: both; to your css like that, that should help---

[CrazyRob 0]

Ok i can access the site now...What i would do is remove the Recent Entries and Last 5 Months or move it to a different place on the site. Is "Lime ti=ouch ment to be on the site or is it just the name of the template you have used? if so then rename it.

[zyzzyvette 0]

Make a file containing this (could call it ie7.css for example)

#bottom {	FLOAT:none;}

Then in your header, after you reference your first stylesheet, put in a conditional comment for ie7 referencing it. :PEDIT: I was in a bit of a hurry before, so I didn't have time to explain a little more thoroughly (for anyone who might read this in the future with a similar problem). Conditional comments are a special kind of HTML "code" that's recognized only by Internet Explorer builds, and they're used to basically tell IE how to fix what it's doing wrong/differently from other (more standards-compliant) browsers. They look like this:

<!--[if IE 7]>Special instructions for IE 7 here<![endif]-->

Every other browser will render this as a regular HTML comment, but anything in the "special instructions" area will be read by IE7. If you stick a line of HTML code that references a separate CSS file, you can put special CSS that will only apply to that browser. In this case, it'd be changing the "float" attribute of the misplaced box; changing it to "none" messes up non-IE browsers but having it as "left" messed up IE, so the conditional comment makes them both happy. :DHope this solution works for you, I saved a copy of your main page and this seems to work on my "desktop copy".

Edited February 19, 2007 by zyzzyvette (see edit history)

[darran 0]

MusicOnly, I did not design that template, I got it off a site as a theme download and am using it in my blog. I could never be capable of designing something like that

Matak: In the css, the code (clear:both;) is already in there so that isn't a solution. Thanks anyway

I didn't exactly understood how I could implement zyzzyvette's solution but I changed this line of code in my style.css and it is working for me in IE7.

#bottom {	/* clear: both; */	float: left !important;	float: none;	width: 760px;	height: 100%;	margin: 0;	padding: 0;	background: #031545 url(images/separator_green.gif) repeat-x 0 0;	border-top: 20px solid #fff;	text-align: left;	color: #fff;	}

I have just validated this and it appears to be xhtml 1.0 strict compliant, but I am interested to know how you implemented those conditionals. Would you mind sending it to me to my email (limetouch[at]gmail[dot]com).

[matak 2]

I hope you understand this code written down. It's how you implement those <!--[if ie7]> thingy. Just add it in your HTML between head tags and then IE will use stylesheet provided with that conditional.

<head><!--[if IE 7]><link rel="stylesheet" href="IEstyle.css"><![endif]--><link rel="stylesheet" href="style.css"></head>

One more thing, what does that 'float: left !important' stand for?! I searched but couldn't find proper answer on that '!important' thing. Does it work with only 'float: none;' ?!

[zyzzyvette 0]

!important tells standards-compliant browsers to ignore any changes to that attribute in child elements. It works with anything, font-weight, border, whatever, just not on Microsoft browsers.

[jlhaslip 4]

I beg to differ with the comments about the !important description.

It is used to redefine the normal "cascade" of styling elements. There is a sequence defined which can be overruled by using the !important attribute. Clients viewing the page can overrule the Author's definition and, similarly, authors can overrule a client's definition. All the specifics can be determined by studying the w3c Specifications on the cascade, their source and specificity.

The Cascade is defined as being :

1. user agent declarations // all Browser have them and they differ between Browsers
2. user normal declarations // if so defined
3. author normal declarations // if you have a style on the page or in a linked CSS file
4. author important declarations // If you have an !important
5. user important declarations // The Client's !important rule will win

Regarding the IE Conditional Statements from above, because of the cascade (again) place the IE specific rules or style sheet AFTER the General rule or style sheet since the "last named" rule will apply. For example, if they are listed as above, the IE rule will set values and then the general sheet will over rule them, when in fact, you want the IE rules to change in the event the Browser is an IE.

<link rel="stylesheet" href="style.css"><!--[if IE 7]><link rel="stylesheet" href="IEstyle.css"><![endif]--></head>

This would work better for determining the specific styles for IE AFTER the general styles are stated in the regular stylesheet.

Hope this doesn't confuse anything.

[darran 0]

Thanks for all your replies, it does clear some of the doubts I am having. But the problem why I have difficulty in implementing zyzzyvette's code is because Wordpress does not work on 1 .htm page, there are many .php pages like sidebar, footer, index, page, header .... etc to basically make up the index page. I have just checked the header.php and this is the way it is retrieving the stylesheet

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

I am not too sure how I can link in another stylesheet without making the values static. Can anyone advise?