Forum Moderators: not2easy
body {
width:100%;
height:100%;
padding-left:6px;
background-image:url(../images/torcal_main_yogi2.jpg);
background-attachment:fixed;
z-index:0;
font-family:Arial, Helvetica, sans-serif;
color:#990000;}
td { color:#990033;}
#container {
font-family:Arial, Helvetica, sans-serif;
position:absolute;
padding-left:4px;
top:0;
left:0;
height:100%;
min-height:100%;
max-height:100%;
margin:0px 0px 0px 0px;}
#position {width:800px; margin:0 auto;}
#menu {
width:800px;
height:60px;
position:absolute;
text-align:center;
top:1;
left:1;}
#content {
width:95%;
overflow:hidden;
padding-left:6px;}
and the start of the page...
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The title is here</title>
<meta name="keywords" content="Keywords in here" />
<meta name="description" content="And the content description here" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="the dhtml menu head script-scripts/stmenu.js"></script>
<link href="styles/the.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="position">
<div id="menu">
<script type="text/javascript" src="path to the menu dhtml script"></script>
</div>
<noscript>
The non-dhtml version of the navigation - like a sitemap
</noscript>
<div id="content">
<div id="header1">
<h1>The header<h1>
</div>
<div id="header2">
<h2>Secondary header.</h2>
</div>
Some content from here and then a copyright with closing tags.
So can somebody help me, please. The code all validates fine. The pages (all of them) work fine in IE but are all displayed to the left of the screen in Firefox, as if my CSS were not there.
Or, remove the <div id="container"> from the the HTML and the text will pop into place.
Comment out a little more tightly and it is tied to the position: Comment out only the positioning in #container and the text will pop into place.
#container {
font-family:Arial, Helvetica, sans-serif;
/*
position:absolute;
top:0;
left:0;
*/
padding-left:4px;
margin:0px 0px 0px 0px;
height:100%;
min-height:100%;
max-height:100%;
}
If it isn't sorted out, I might be able to look more closely tomorrow. Do you really need that absolute positioning?
I have been scratching my head for ages not seeing it. I am still in the twilight zone a bit, as I am a recovering tables aholic. CSS is still a little bit like witchcraft to me, but I am getting there.
I really appreciate the help.
Now, I don't suppose there is an easy, comment-out-a-line-or-two fix for the dhtml menu that's having an affair with the left hand side of the screen, even though the page is perfectly aligned? Any help from anybody would be appreciated.
Thanks again.
1. Design and test in Firefox or Opera. This gives you the best chance of writing solid code. If it looks good in Firefox and Opera, but IE doesn't render correctly, you know that the base coding is probably good; just a matter of making an adjustment that IE can handle or serving up an IE specific hack. (Your issue was a little different but fixed easily enough.) If you code for presentation in IE, then there is an above average chance that the code itself has problems that could have been avioded, and the issue will be more serious than it needed to be.
2. When you run into trouble, comment out everything (Usually just CSS, sometimes HTML as well.) that doesn't affect the issue. Do this piece by piece, as some problems won't be as simple as a single CSS declaration. Test as you go in multiple browsers and you'll usually narrow the problem down to a specific code block pretty quickly. Finding a fix (or the best fix) can be more problematic - but reducing the code to the problem itself comes first. Then you fix it. If it resists fixing, then you can post the relevant code here for others to look at. If you've already shown that you've "worked the problem" and can present the issue clearly then the chances of help riding in increase dramatically. If you've worked the issue down to the problem, people here know every fix that exists:))
Do this with your menu and the problem and solution may jump right out. The menu has some JS. Work the CSS first, that will probably do it; but don't necessarily rule out the JS. Good idea not rule anything in or out. Always test.
To get away from the DHTML menu that needs javascript, I have decided to try a straightforward unordered list, with css to style it as a dropdown menu.
But I still have a problem, as I want it to remain fixed at the top of the page like a header frame (THATs not the problem) and centred. Now THATs the problem. I have tried adding/subtracting/chopping and changing but I can't find a way to centre the menu within the container, which I want to be in view at all times. HELP!
Heres the start of the CSS...
body { width:100%;
height:100%; /* take up the whole screen*/
padding-left:6px;
background-image:url(../images/torcal_main_yogi2.jpg);
background-attachment:fixed; /*background image is static*/
z-index:0; /*low number keeps it at the back*/
font-family:Arial, Helvetica, sans-serif;
color:#990000;}
#header{position:fixed;
top:5;
left:15px;
width:100%;
height:30px;
z-index:1000;}
/*This is to make a pseudo frame at the header
position so the menu does not move at all*/
#menu_container {
margin:0px auto 10px auto;
position:relative;
width:100%;
height:25px;
z-index:100;}
/*This is supposed to position the menu at the top of the header div with a
small gap before the actual page arrives in the next div, and centre it */
#container {
display:block;
font-family:Arial, Helvetica, sans-serif;
padding-left:4px;
height:100%;
min-height:100%;
max-height:100%;
width:800px;
margin:0 auto;}
/*Followed the previous advice to centre the content and that is fine now*/
#content {width:90%;
overflow:hidden;
padding-left:6px;}
...and the start of the page...
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The title is here</title>
<meta name="keywords" content="Keywords in here" />
<meta name="description" content="And the content description here" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="I have a slideshow within the content div that works fine.js"></script>
<link href="styles/the.css" rel="page stylesheet" type="text/css" />
<link href="styles/the.css" rel="menu stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="menu_container">
Menu - straightforward unordered list using css
</div>
</div>
<div id="container">
<div id="content">
<div id="header1">
<h1>The header<h1>
</div>
<div id="header2">
<h2>Secondary header.</h2>
</div>
Some content from here and then a copyright with closing tags.
However, I commented out both #header and #menu-container from the CSS, and saw very little change in rendering. Thus, I just hacked them out completely and began the start of what you are looking to do. The <ul> is contained and centered. Whether it easily stays that way depends upon your specific requirements.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The title is here</title>
<meta name="keywords" content="Keywords in here" />
<meta name="description" content="And the content description here" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="I have a slideshow within the content div that works fine.js"></script>
<link href="styles/the.css" rel="page stylesheet" type="text/css" />
<link href="styles/the.css" rel="menu stylesheet" type="text/css" />
<style type="text/css" media="all">
body {
width:100%;
height:100%; /* take up the whole screen*/
padding-left:6px;
background-image:url(../images/torcal_main_yogi2.jpg);
background-attachment:fixed; /*background image is static*/
z-index:0; /*low number keeps it at the back*/
font-family:Arial, Helvetica, sans-serif;
color:#990000;
}#container {
display:block;
font-family:Arial, Helvetica, sans-serif;
padding-left:4px;
height:100%;
min-height:100%;
max-height:100%;
width:800px;
margin:0 auto;
}
/*Followed the previous advice to centre the content and that is fine now*/#content {width:90%;
overflow:hidden;
padding-left:6px;
}/*
#header{
position:fixed;
top:5;
left:15px;
width:100%;
height:30px;
z-index:1000;
}
*/
/*This is to make a pseudo frame at the header
position so the menu does not move at all*//*
#menu_container {
margin:0px auto 10px auto;
position:relative;
width:100%;
height:25px;
z-index:100;
}
*/#header {
margin-top: 3em;
}
#menu_container {
text-align: center;
}
#menu_container ul {
margin: 0 0 2em 0; padding: 0;
}
#menu_container ul li {
display: inline; list-style-type: none; border: .1em solid #000; padding: .3em; margin: 0 .3em;
}
/*This is supposed to position the menu at the top of the header div with a
small gap before the actual page arrives in the next div, and centre it */
</style>
</head>
<body>
<div id="header">
<div id="menu_container">
<ul>
<li>
Link One
</li>
<li>
Link Two
</li>
<li>
Link Three
</li>
</ul>
</div>
</div>
<div id="container">
<div id="content">
<div id="header1">
<h1>
The header
</h1>
</div>
<div id="header2">
<h2>
Secondary header.
</h2>
</div>
<div>
Some content from here and then a copyright with closing tags.
</div>
</div>
</div>
</body>
</html>
BTW - It's a lot easier to work a code block that one can just drop into a test page without moving stuff arond.
The problem is, all ok in FF. but in ie. my feedback form (an ajax i found on the net, tweaked a little for branding) the menu (same one) doesn't stay fixed. It scrolls with the page. Perhaps you've met this one before and can give a quick fix. I am totally stumped this time - I have been tinkering all afternoon and am no further.
The problem was staring me in the face all the time. Although the code for the page validated it was actually missing the doctype declaration! How it validated I have no idea, as I tend to run them through the w3c validator after I have checked in Dreamweaver. I can only think that I must have forgotten to do that simple step - it would have shown it straight away.
I couldn't figure it out because the menu was staying put in every other page. It still hangs on the left in ie, but I am going to take my time with that and learn some more while I do it. But in FF all is well. FF should take a more aggressive stance in the marketing world. Knock everybody's favourite browser off the top spot.
Thanks for the reply and I am very sorry for wasting your time.
The problem was staring me in the face all the time.
That is often the case. I'm working on the record, and you'll probably never catch up:)) Nothing more than 'a fresh pair of eyes' has saved my a.. plenty of times. And the number of stupid questions that I've asked that people have happily helped with (especially with topics/subjects that I have minimum experience with). I just try to make each dumb question on a specific subject a little less so than the last, so that I can show that I'm paying attention and trying to learn:))
Firefox and Opera have both done plenty of damage and will continue to do so. 'Everybody's favorite browser' will hold continue to hold the top spot; but at least are paying some minimum attention to the threats. Once you know the main IE hacks, then it's usually not too big a deal except for very specific issues.
(What's especially cool, is to have a non-ecommerce site or two where you can just ban IE users completely, and go cutting edge all the way.)
You've not wasted my time at all. You've made progress with your issues and learned a trick or two that may minimize, or even prevent, some future issues. We should both declare victory:))
