943,907 Members | Top Members by Rank

Ad:
You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page
Aug 16th, 2007
0

Re: css not working in IE

...MidiMagic...
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.


...ashneet...
What you are asking for is possible... but it is fair easier, simplier and more reliable to "cheat".
Due to certain Browsers not following the guidelines, and others doing their own thing... things like "equal height columns" across all browsers are a pain.
So isntead,there are a couple of techniques... but "faux columns" is the most reliable.
This is basically makig a container that has a bg image, then two divs inside the container.
An alternative is to use the Ruthsarian layout... kind of Equal columns with some extras (though more complicated!).


So... simple version (try this one first!)

<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>

#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}

#contents
{
margin-left: 200px;
}

#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}


Give that a go.
If you have a fixed width design, it is a simple case of applying the BG to the Container.
If it is fluid... then make 2 Containers (container1/container2), and make 2 iamges... one almost the fullwiddth of a normal resolution, with only one edge, the second make around the same size, but with the other edge on it... and apply a bit of padding.... so container1 has bg1 and padding-left 20px, container2 has the pther image, and is prevented from overlapping due to the paddig

Seriously - noe of it is complicated (one you figure the logic behind CSS)... and you can do a damn site more than with tables.
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Aug 16th, 2007
0

Re: css not working in IE

i have to agree with autocrat. Tables are for eating on.
Reputation Points: 18
Solved Threads: 2
Junior Poster
Dsiembab is offline Offline
156 posts
since Mar 2007
Aug 16th, 2007
0

Re: css not working in IE

Thanks autocrat that help me get rid of tables.

now the tables are gone but two issue still remain.

1) the container wont touch the bottom even when I set height to 100% - Ignorable issue.

2) the nav is not the same height as content.

I made the modifications at http://test.eezs.com
Reputation Points: 10
Solved Threads: 1
Junior Poster
ashneet is offline Offline
147 posts
since Jun 2005
Aug 16th, 2007
0

Re: css not working in IE

Arg - Validate man, Validate

http://validator.w3.org

That will show you a whole bunch of issues with the code...

Still, as you are willing to make the effort - so will I.

Keep an eye on her, I will paste you some code
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Aug 16th, 2007
0

Re: css not working in IE

Click to Expand / Collapse  Quote originally posted by autocrat ...
Arg - Validate man, Validate

http://validator.w3.org

That will show you a whole bunch of issues with the code...

Still, as you are willing to make the effort - so will I.

Keep an eye on her, I will paste you some code
I validated the page all those errors are from yahoo pasting a small script at the end of the page. that should not cause any problems.
Last edited by ashneet; Aug 16th, 2007 at 1:30 pm.
Reputation Points: 10
Solved Threads: 1
Junior Poster
ashneet is offline Offline
147 posts
since Jun 2005
Aug 16th, 2007
1

Re: css not working in IE

hmmm, must have forgotte html coding...
I thought things like <img> had to be either..
<img> </img> or <img /> ???

Still... here we go....
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Aug 16th, 2007
0

Re: css not working in IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->

<html>

<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>


<body>

<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>



<!-- Main Section -->

<div id="container">

<div id="content">

<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>

<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->

<p>
Test content goes here.
</p>



</div> <!-- content -->

<div id="contentfooter">
Content Footer content
</div> <!--contentfooter-->

<div class="clear">&nbsp</div>
</div> <!-- container -->




<!-- Footer Section -->

<div id="pagefooter">
Page Footer content
</div> <!--pagefooter-->




<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->

<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>

<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>

</body>

</html>





/* You didn't include HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for text-size: 75%; */
font-size: 11px;
/* helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}



body
{
MARGIN: 0;
padding: 0;
height: 100%;
background-color: #abcdef;
}


#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}


#container
{
margin: 0;
padding: 0;
clear: both;
float: left;
width: 100%;
background-color: #ffffff;
min-width: 770px;
position: relative;
/* IE Bug Fix - # Hack may only work for IE 5/6 - 7 doesn't need it */
#zoom: 1;
}


#content
{
margin-left: 150px;
/* IE Bug Fix - prevents 3px Jog */
#display: inline-block;

}


#leftcol
{
float: left;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
}




#leftcol ul
{
/* Wheres the other value ??? you have three... which means T R B... no Left! */
margin: 5px;
padding: 0;
border: #cccccc 1px solid;
list-style: none;
background-color: #ffffff
}


#leftcol a, #leftcol a:visited
/* As there is no difference between a Link and a Visited:Link, you can put them together! */
{
margin: 0;
padding: 0;
color: #000000;
text-decoration: none;
display: block;
width: 138px;
vertical-align: bottom;
line-height: 2em;
}

/*
There really should be a difference when interacting with a Link.
This permits people to "know" that they are workig with a Link.
Though changing BG is okay... you may want to think about those with color-vision issues.
- Focus is used so that keyboard-users can use the "Tab Key".
- Active is used as IE doesn't work with Focus.

#leftcol a:active, #leftcol a:hover, #leftcol a:focus
{
background-color: #abcdef;
text-decoration: underline;
}
*/

#contentfooter
{
position: absolute;
bottom: 0;
left: 150px;
}

img
/* IE Bug Fix - Images in the markup withany space after results in a "gap" in IE */
{
display: block;
}


.clear
/* This is to handle floats being contained.
Thechnically, a float is no longer part of the normal document flow - so they can overlap!
By placing a div within the parent, after the floated children - and making it clear:both, it forces the parent to "stretch" */
{
clear: both;
font-size: 1px;
line-height: 1px;
}

p
{
margin: 0;
padding: 5px 0;
}






INPUT {
FONT-SIZE: 11px
}

.center {
TEXT-ALIGN: center
}

.center TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}

.center DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}

.right {
TEXT-ALIGN: right
}

.right TABLE {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}

.right DIV {
MARGIN-LEFT: auto; MARGIN-RIGHT: 0px
}

FORM {
MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px
}

#error {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: left
}

#error .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}

#error UL {
FONT-WEIGHT: lighter; MARGIN: 0px auto; COLOR: #990000; LIST-STYLE-TYPE: square
}

#login {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}

#login .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#login TR {
VERTICAL-ALIGN: baseline
}

#login .desc {
FONT-SIZE: 10px; COLOR: #006600
}

#login .forget {
FONT-SIZE: 10px; TEXT-ALIGN: left
}

#login .forget A:link {
COLOR: #ff0000; TEXT-DECORATION: none
}

#login .forget A:visited {
COLOR: #ff0000; TEXT-DECORATION: none
}

#active {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}

#active .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}

#active TR {
VERTICAL-ALIGN: baseline
}
#active .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#forget {
BORDER-RIGHT: #cccccc 2px solid; BORDER-TOP: #cccccc 2px solid; FONT-SIZE: 11px; BORDER-LEFT: #cccccc 2px solid; BORDER-BOTTOM: #cccccc 2px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right
}
#forget .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register {
FONT-SIZE: 11px; WIDTH: 618px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#register .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#register .desc {
FONT-SIZE: 10px; COLOR: #006600
}
#register .note {
FONT-SIZE: 10px; COLOR: #ff0000
}
#register .school TR {
VERTICAL-ALIGN: baseline
}
#register .school {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#register .teacher TR {
VERTICAL-ALIGN: baseline
}
#register .teacher {
BORDER-RIGHT: #cccccc 2px solid; TEXT-ALIGN: right
}
#class {
FONT-SIZE: 11px; WIDTH: 100%; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
#class .head {
FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: underline
}
#class .add {
FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif; BORDER-COLLAPSE: collapse
}
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Aug 16th, 2007
0

Re: css not working in IE

Okay - I've only done those that needed doing to get the layout correct.

Please pay attention...

1) You have a habbit of the last bit of CSS for each ID not having a closing ; - which means MozFFwill have issues!

2) You should make things in "lowercase" whenapply them... so not FONT-SIZE, but font-size!

3) In "most" cases, instead of using Padding-top/padding-right/padding-bottom/padding-left... try just padding: 0 0 0 0;!

4) Similarly - try to follow the order of Top-Right-Bottom-Left... even when doing a line each!

5) Also note that "0" does not ahave a measurement unit... so it is 0, not 0px

6) For somethings, making similar entries are not needed - such as you ahving no difference between Lik and Lik:visited... so you can put them together (see CSS).

Still.... you are making the effort, and the above should help.
Keep it up, you've already made some headway, and some of the commetns should help you get over the more annoyig bugs!
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Aug 16th, 2007
0

Re: css not working in IE

hey autocrat my website is having problems, can you code the whole thing for me too? just kidding.
Reputation Points: 18
Solved Threads: 2
Junior Poster
Dsiembab is offline Offline
156 posts
since Mar 2007
Aug 16th, 2007
0

Re: css not working in IE

Thanks a lot autocrat.

I will fix them up as soon as I can.

btw how do you know how to fix bugs in ie...
Reputation Points: 10
Solved Threads: 1
Junior Poster
ashneet is offline Offline
147 posts
since Jun 2005

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: CSS Template Edit Problem
Next Thread in HTML and CSS Forum Timeline: LogicWeb / CSS Question





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC