Jump to content
xisto Community
Sign in to follow this  
darran

Need Help In Web Design Of Site

Recommended Posts

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?

Share this post


Link to post
Share on other sites

Try just getting rid of the footer. :P

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
#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---

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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". :D

Edited by zyzzyvette (see edit history)

Share this post


Link to post
Share on other sites

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 :P

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).

Share this post


Link to post
Share on other sites

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;' ?!

Share this post


Link to post
Share on other sites

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. :P

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.