Cross Browser compatibility question

T

tom

I am learning css and am starting to make headway. However, I occasionally
get weird results especially with I.E.

When I create a three column lay out when I first launch it the contents of
the left column get bumped into the center column! If I do a refresh of the
page it goes back to the left and stays there. Firefox and firebird never
have this issue. I have been looking into crossbrowser stuff what is going
on?

Ultimately, I would like to be dong this stuff with out help. So if any one
could recommend a good tutorial on making pages with css look good on "all"
browsers I would greatly appreciate that also.

Thanks;
Tom


------ begin html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>The Charles River Company</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="formating.css" type="text/css" />
</head>
<body>

<div id="pagewidth" >
<div id="header" >
<div class="content"> <h1>The Charles River Company</h1> </div>
</div>
<div id="outer" >
<div id="inner">
<div id="leftcol" >
<div class="content"> About Us </div>
</div>
<div id="maincol" >
<div class="content"><center> <br><b> The Charles River Company is
located at:<br>
1650 South Pacific Coast Highway<br>
Recondo Beach, CA 90277</b><br></center>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div id="footer" >
<div class="content"> Contact Webmaster</div>
</div>
<div class="clr"></div>
</div>
</body>
</html>----- end html file----- begin formating.csshtml, body{ margin:0;
padding:0; } #pagewidth{ width:100%; min-width: 500px; } #header{
height:80px; width:100%; background-color:#0000C0; color: AliceBlue; }
#leftcol{ width:180px; float:left; position:relative; margin-left:-180px;
margin-right:1px; } #outer{ border:solid white 0px; border-left-color:
#0999FF; border-left-style: solid; background-color: #FFFFFF; width:
uto; } #footer{ height:45px; width:100%; background-color:#FFFFFF; }
#inner{margin:0; width:100%;} #maincol{ float: left; width: 100%;
position: relative; margin: 0 -8px 0 -2px; } #outer>#inner {
border-bottom: 1px solid #FFFFFF; } .clr{clear:both;}
..content{padding:5px;} #header .content{padding-bottom:0;} ----- end
formating.css
 
M

Mark Parnell

I am learning css and am starting to make headway.
Excellent.

However, I occasionally get weird results especially with I.E.
Click to expand...

Don't we all?
When I create a three column lay out when I first launch it the contents of
the left column get bumped into the center column! If I do a refresh of the
page it goes back to the left and stays there. Firefox and firebird never
have this issue. I have been looking into crossbrowser stuff what is going
on?
Click to expand...

I don't know. URL?
Ultimately, I would like to be dong this stuff with out help. So if any one
could recommend a good tutorial on making pages with css look good on "all"
browsers I would greatly appreciate that also.
Click to expand...

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/content.php3?aid=48
http://www.canit.se/~griffon/web/writing_stylesheets.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://idm.internet.com/articles/200101/csstutorial1a.html
http://www.greytower.net/en/archive/articles/tsutsumi.html
http://www.westciv.com.au/style_master/academy/css_tutorial/
http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html

layout examples:
http://www.glish.com/css/
http://www.csszengarden.com/
http://www.wannabegirl.org/css/
http://tantek.com/CSS/Examples/
http://www.saila.com/usage/layouts/
http://www.bluerobot.com/web/layouts/
http://www.benmeadowcroft.com/webdev/
http://www.xs4all.nl/~apple77/columns/
http://www.meyerweb.com/eric/css/edge/
http://www.htmler.org/tutorials/3/1.html
http://css.nu/articles/floating-boxes.html
http://webhost.bridgew.edu/etribou/layouts/
http://www.roguelibrarian.com/lj/index.html
http://css-discuss.incutio.com/?page=CssLayouts
http://ecoculture.com/styleguide/r/rollovers.html
http://thenoodleincident.com/tutorials/box_lesson/index.html
http://www.webreference.com/authoring/style/sheets/layout/advanced/

rounded corners:
http://www.albin.net/CSS/roundedCorners/
http://www.webweaver.org/dan/css/corners/
http://www.guyfisher.com/builder/workshop/css/corners/

slants: http://www.infimum.dk/HTML/slantinfo.html
centring: http://stone.thecoreworlds.net/www/centre/
lists: http://www.alistapart.com/stories/taminglists/
pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html

master compatibility charts:
http://www.xs4all.nl/~ppk/css2tests/intro.html
http://www.blooberry.com/indexdot/css/index.html
http://macedition.com/cb/resources/abridgedcsssupport.html
old:
http://www.immix.net/html/CSSGuide.htm
http://devedge.netscape.com/library/xref/2003/css-support/

hiding CSS from crappy browsers:
http://centricle.com/ref/css/filters/
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.w3development.de/css/hide_css_from_browsers/

css checkers:
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/

cascading style sheets, level 1 specification
http://www.w3.org/TR/REC-CSS1.html
cascading style sheets, level 2 specification
http://www.w3.org/tr/rec-css2/cover.html
cascading style sheets, level 2 revision 1 working draft
http://www.w3.org/TR/2002/WD-CSS21-20020802/

(thanks brucie)
 
T

tom

I am not sure why the css formating suddenly went in the toilet. Let me try
again.

html, body{
margin:0;
padding:0;
}

#pagewidth{
width:100%;
min-width: 500px;

}

#header{
height:80px;
width:100%;
background-color:#0000C0;
color: AliceBlue;
}

#leftcol{
width:180px;
float:left;
position:relative;
margin-left:-180px;
margin-right:1px;
}

#outer{
border:solid white 0px;

border-left-color: #0999FF;
border-left-style: solid;
background-color: #FFFFFF;
width: auto;
}

#footer{
height:45px;
width:100%;
background-color:#FFFFFF;
}

#inner{margin:0; width:100%;}

#maincol{
float: left;
width: 100%;
position: relative;
margin: 0 -8px 0 -2px;
}

#outer>#inner { border-bottom: 1px solid #FFFFFF; }

..clr{clear:both;}

..content{padding:5px;}

#header .content{padding-bottom:0;}
 
N

Nik Coughin

tom said:
I am not sure why the css formating suddenly went in the toilet. Let
me try again.

html, body{
margin:0;
padding:0;
}
Click to expand...
<snip>

Tom, you will find that you will get more help if you provide an url to the
page in question. If you have to, upload it to a temporary web space of
some kind.
 
N

Neal

css tutorials and other fun 'n giggly css stuff:
...
(thanks brucie)
Click to expand...

I know full well you were quoting brucie, but seeing "giggly" in your post
makes me want to laugh...
 
B

brucie

In alt.html tom said:
Hmmm, that is odd. When I bring up the page locally it always screws up the
first time. I uploaded it to the web and it looks fine! ARGH!
Click to expand...

on occasions IE will display pages differently when they're local.
usually involves margins and padding.
 
B

brucie

In alt.html Mark Parnell said:
You'll have to come visit. ;-)
Click to expand...

i'll drive down on the weekend. i cant wait to meet the dead bitch that
stole you from me.. ummm... did i say that out loud .... i mean your
lovely wife.
 
S

Sid Ismail

On Mon, 25 Oct 2004 17:38:33 -0700, "tom" <a> wrote:

: I am learning css and am starting to make headway. However, I occasionally
: get weird results especially with I.E.
:
: When I create a three column lay out when I first launch it the contents of
: the left column get bumped into the center column!


You are missing a </td> somewhere, I imagine.

URL?

Sid
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
How to position the *tooltip* comment on these buttons? 9
Help with Visual Lightbox: Scripts 2
Having trouble centering contents of td ? 3
Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1
<Button ...> display is fine, except for two things 1
Please Help? 0

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 441

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top