HTML Help!

LoggedIn · February 23, 2008

[pre]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Something to talk about!</title>

</head>

<body>

<h1><strong>Something to do! Yet another 110 site!</strong></h1>

<h2>The latest news, trends, videos, games and gossip all on one site...</h2>

</div>

<ul>

<li><a href="#">Games!</a></li>

<li><a href="#">Videos!</a></li>

<li><a href="#">Forum!</a></li>

<li><a href="#">Web Scripts!</a></li>

<li><a href="#">Applications!</a></li>

<li><a href="#">About!</a></li>

</ul>

</div>

<h2>Welcome!</h2>

<p>Welcome to something to do! STD (something to do) We have a great range of thing to do. STD's aim is to attract new and old guests to out site by providing this like games, videos, jokes

news and lots of interesting things. Our forum is also one of the main applications for you guys! However if you think a feature is missing or you don't like something feel free to contact us

and ask.</p>

<p>We have: Games, videos, jokes, news, apps, infomation, web scripts, applications and forums.</p>

<h2><font size="6">Latest news!</font></h2>

<font size="4"><strong><font color="#000000">Hello forums!</font></strong></font>

<p>Well we have just set up our forums! We hope all goesd well. There is not alot of baords atm but we will add more as the site gets more popular.</p>

<p><span class="important">Members only can access the forum.</span></p>

<a href="/forums">Visit forums!</a><br /></p>

</div>

<h2>Coming soon:</h2>

<p>Soon we will have an arcade script for visitors to play games and add other flash objects. More on this comeing soon.</p>

<h2>Quote of the day!</h2>

<p><em>"Sometimes we do get taken by surprise. For example, when the Internet came along, we had it as a fifth or sixth priority."<br />

-- Bill Gates, Jul, 1998</em></p>

<p><strong>Feel free to submit any!</strong></p>

</div>

<p><strong><font size="5">Youtube videos:</font></strong></p>

<p align="center"><strong><a href="

size="2">DotA - Basshunters</font></a></strong></p>

<p align="center"><strong><a href="http://www.youtube.com/watch?v=60og9gwKh1o"><font size="2">NumaNuma</font></a></strong></p>

<p align="center"><strong><a href="

size="2">Thriller - Prison dance</font></a></strong></p>

You can view our about page for more information on the website.

</div>

<strong>Note:</strong> Not all pages are complete but soon we will be able to have all pages working properly and smoothly.

</div>

<h2>Navigations:</h2>

</div>

<font size="2">Forum</font>

</div><font size="2">About</font>

</div>

<font size="2">Secret</font>

</div>

<font size="2">Coming soon </font>

</div>

<h2>Links</h2>

<p>Your website here!</p>

</div>

</div>

</center>

</body>

</html>[/pre]

If you look at that in IE you see 2 major problems. 1 is the footer at the bottom is out of place and does not join the main block. Also there is space on the right between the content and header and the side. Can someone fix this?

btw,you will need the css.

*{margin:0; padding:0;}

body{
font:76% Verdana,Tahoma,Arial,sans-serif;
line-height:1.4em;
text-align:center;
color:#303030;
background:#e8eaec;
}

a{
color:#467aa7;
font-weight:bold;
text-decoration:none;
background-color:inherit;
}

a:hover{color:#2a5a8a; text-decoration:none; background-color:inherit;}
a img{border:none;}

p{padding:0 0 1.6em 0;}
p form{margin-top:0; margin-bottom:20px;}

img.left,img.center,img.right{padding:4px; border:1px solid #a0a0a0;}
img.left{float:left; margin:0 12px 5px 0;}
img.center{display:block; margin:0 auto 5px auto;}
img.right{float:right; margin:0 0 5px 12px;}

/**************** Header and navigation styles ****************/

#container{
width:760px;
margin:20px auto;
padding:1px 0;
text-align:left;
background:#ffffff;
color:#303030;
border:2px solid #a0a0a0;
}

#header{
height:110px;
width:758px;
margin:0 1px 1px 1px;
background:#467aa7;
color:#ffffff;
}

#header h1{
padding:35px 0 0 20px;
font-size:2.4em;
background-color:inherit;
color:#ffffff;
letter-spacing:-2px;
font-weight:normal;
}

#header h2{
margin:10px 0 0 40px;
font-size:1.4em;
background-color:inherit;
color:#f0f2f4;
letter-spacing:-1px;
font-weight:normal;
}

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

/**************** Content styles ****************/

#content{
float:left;
width:530px;
font-size:0.9em;
padding:20px 0 0 20px;
}

#content h2{
display:block;
margin:0 0 16px 0;
font-size:1.7em;
font-weight:normal;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}

#content h2 a{font-weight:normal;}
#content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;}
#content a:hover,#subcontent a:hover{text-decoration:underline;}
#content ul,#content ol{margin:0 5px 16px 35px;}
#content dl{margin:0 5px 10px 25px;}
#content dt{font-weight:bold; margin-bottom:5px;}
#content dd{margin:0 0 10px 15px;}

/**************** Sidebar styles ****************/

#subcontent{
float:right;
width:170px;
padding:20px 20px 10px 0;
line-height:1.4em;
}

#subcontent h2{
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#505050;
background-color:inherit;
}

#subcontent p{margin:0 0 16px 0; font-size:0.9em;}

/**************** Menublock styles ****************/

.menublock{margin:0 0 20px 8px; font-size:0.9em;}
.menublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}

/**************** Searchbar styles ****************/

#searchbar{margin:0 0 20px 0;}
#searchbar form fieldset{margin-left:10px; border:0 solid;}

#searchbar #s{
height:1.2em;
width:110px;
margin:0 5px 0 0;
border:1px solid #a0a0a0;
}

#searchbar #searchbutton{
width:auto;
padding:0 1px;
border:1px solid #808080;
font-size:0.9em;
text-align:center;
}

/**************** Footer styles ****************/

#footer{
clear:both;
width:758px;
padding:5px 0;
margin:0 1px;
font-size:0.9em;
color:#f0f0f0;
background:#467aa7;
}

#footer p{padding:0; margin:0; text-align:center;}
#footer a{color:#f0f0f0; background-color:inherit; font-weight:bold;}
#footer a:hover{color:#ffffff; background-color:inherit; text-decoration: underline;}

/**************** Misc classes and styles ****************/

.splitcontentleft{float:left; width:48%;}
.splitcontentright{float:right; width:48%;}
.clear{clear:both;}
.small{font-size:0.8em;}
.hide{display:none;}
.textcenter{text-align:center;}
.textright{text-align:right;}
.important{color:#f02025; background-color:inherit; font-weight:bold;}

.box{
margin:0 0 20px 0;
padding:10px;
border:1px solid #c0c0c0;
background-color:#fafbfc;
color:#505050;
line-height:1.5em;
}

Northern Flame · February 24, 2008

you can try making a css file that works in ie,

save it ass ie.css and just put this in the

head section:

<!--[if IE]>

<![endif]-->

TheFilmGod · February 25, 2008

you can try making a css file that works in ie,

save it ass ie.css and just put this in the

head section:

Good point, but I recommend doing this instead:

<!--[if IE]>
<style type="text/css">
  	@import url("ie.css");
</style>
<![endif]-->

This uses a lot less code and does the exact same thing.

OriginalBoy · March 4, 2008

Yes try making it in ie.

haku · March 4, 2008

@import url() doesn't work in IE7, so it shouldn't be used.

TheFilmGod · March 5, 2008

@import url() doesn't work in IE7, so it shouldn't be used.

... maybe you should check your sources before being so rash and posting such incorrect posts?

haku · March 5, 2008

Is it so incorrect?

The Import fix was definatly the issue that needed fixing. I never would have guessed that the import meathod made such a difference.

http://www.designerstalk.com/forums/help-me/33621-new-web-designer-ie-trouble.html

The guy's site wasn't working with that method, he changed the method and now its working. In IE7.

If I'm wrong, then explain that situation.

haku · March 5, 2008

http://www.broken-links.com/2007/02/15/ie7-and-import-media-types/

haku · March 5, 2008

@import "non-ie.css" all;

Internet Explorer 7 and below don't support media selectors on @import rules, instead ignoring the entire rule when they are present. Therefore, you can create an entire stylesheet for non-IE browsers and import it into your main stylesheet by adding @import "non-ie.css" all;.

Future versions of Internet Explorer may support the @import rule correctly.

@import "stylesheet.css" all; imports the stylesheet in all major browsers except IE 7 and below. It may or may not work in future versions of IE.

http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml

haku · March 5, 2008

The IE 7 Hover Bug

On some designs that use CSS for rollovers (hover effects on links or anchors), you’ll discover they won’t work. Not at all. I didn’t/couldn’t identify why it would manifest on certain sites only. It would only show up on sites using hover in a linked CSS using “@import” to make the connection.

http://green-beast.com/blog/?p=92

haku · March 5, 2008

After reading all that, I have come to realize I was both right and wrong in what I typed, as were you.

I was wrong, in that it does work in IE7, but I was right in that it doesn't completely work and is buggy and some things wont work.

You were right in that it does work in IE7, but wrong in that it doesn't work perfectly.

Which still leads me to the same conclusion however, that it shouldn't be used. The following option isn't buggy.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/ie.css" />
<![endif]-->

Is the better option, as it will be more stable.

TheFilmGod · March 5, 2008

You were right in that it does work in IE7, but wrong in that it doesn't work perfectly.

What do you mean my method doesn't work perfectly? The code I gave is the code that works 100%. Don't create assumptions on the revision of code. Otherwise there would be a million what if you change this... . Simply copy and paste, and you're done for the day.

<!--[if IE]>
<style type="text/css">
  	@import url("ie.css");
</style>
<![endif]-->

haku · March 5, 2008

:hover for example wont work using that code.

I personally would prefer a method under which the most possible methods will work (of course you are limited by the fact that IE doesn't support all CSS). I think that most people using CSS use :hover at some point, so thats why I think the other code is better.

Read through some of those articles I posted.

bronzemonkey · March 5, 2008

you can try making a css file that works in ie,

save it ass ie.css and just put this in the

head section:



Good point, but I recommend doing this instead:

This uses a lot less code and does the exact same thing.

What do you mean "a lot less"? There is barely any difference in the number of characters used. It's pointless using @import for a stylesheet that is in a conditional, especially a conditional that targets a specific version of IE. May as well use <link> and avoid any potential problems.

haku · March 5, 2008

I just threw both codes into word and did a letter count - the verdict is that the '@import' uses one less character. Although it also dropped two forward slashes that were in the other code, so in fact it uses one more character.

TheFilmGod · March 6, 2008

I just threw both codes into word and did a letter count - the verdict is that the '@import' uses one less character. Although it also dropped two forward slashes that were in the other code, so in fact it uses one more character.

Yes, but did you take in account that a typical website uses 2 or more style sheets at a time?

Each time you add a new stylesheet link, @import (file.css) is needed, which is barely any space. Old <link ..> needs to be repeated all over again...

haku · March 6, 2008

I guess it depends on your style when writing CSS sheets.

But, that stil doesn't address the fact that not all features work in IE when using that method.

TheFilmGod · March 6, 2008

I guess it depends on your style when writing CSS sheets.

But, that stil doesn't address the fact that not all features work in IE when using that method.

nothing works in IE - so what's new?

haku · March 6, 2008

Haha!!!

You do have a point!

But the import function cuts off even more features that IE actually does have the capability to deal with. Its already stunted, why stunt it even more?

TheFilmGod · March 7, 2008

Haha!!!

You do have a point!

But the import function cuts off even more features that IE actually does have the capability to deal with. Its already stunted, why stunt it even more?

Maybe you are right, but the features that IE doesn't support aren't common. And creating assumptions on code alterations is improper from your stance, since the exact code I gave, is code that works. End of discussions. So stop yacking on what if this and what if that.

I simply gave a suggestion that uses less code in the long run and works 100% AS IS.

haku · March 7, 2008

Did you read those articles I posted?

:hover seems like something people use all the time.

Sign In

HTML Help!

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information