Well I just finished my index page, got the css and padding, etc. the way I want it. Looks GREAT on Firefox, but on IE it is horrible!!!!

Should I use an IE hack so that if the browser is IE it defaults to a IE.css sheet, instead of my master.css???

Also, I have used link buttons for moving through my site. Spacing is perfect in FF, yet IE they are like a mile away from each other vertically. How do I fix this? Thanks!!!

Yes, you should use conditional comments to link to a CSS file that contains only the fixes needed to kick IE into compliance. Put the link after the one to your regular style sheet, then IE reads the regular one, then the fixes, so you don't have to do a whole new complete style sheet just for it. That's par for the course in any page: "Yes! It looks great in the standards compliant browsers! Now let's see how IE butchered it so we can force it to display it right."

As for your menu issue, let's have a link to the page (preferably) or at least the code. Debugging a concept proves iffy.

tim

Originally Posted by serandfae

Yes, you should use conditional comments to link to a CSS file that contains only the fixes needed to kick IE into compliance. Put the link after the one to your regular style sheet, then IE reads the regular one, then the fixes, so you don't have to do a whole new complete style sheet just for it. That's par for the course in any page: "Yes! It looks great in the standards compliant browsers! Now let's see how IE butchered it so we can force it to display it right."

As for your menu issue, let's have a link to the page (preferably) or at least the code. Debugging a concept proves iffy.

tim

Thanks!


Here is the code...

I don't mean to be rude by asking this, but has this site been updated since 1999? That's about when load time clocks fell out of fashion. You'd do well to ditch the tables for layout as well, because that is part of your menu problem. Put a thin border around your images and each cell temporarily, and switch image display off, then look at it in IE, you'll see what the problem is.

But really, do yourself a favor and do it over without tables. Tables for layout was how I first learned, but it really didn't take me long to transition, and the lack of unnecessary code bloat was sufficient to convince me I did right.

tim

Hahahaha, thanks! I do appreciate the feedback. No, I have not launched it yet, I will take the load clock off. Just goofing around...

Well that is how I originally did it in asp - moved to linux server and had to start over. I initially did not use tables. So you are saying I should just use boxes and absolute positioning?? Also what is the biggest pixel size should I use for most monitors and cards? I was thinking 900px wide max???

How do I switch image display off? Sorry for the noob questions. Thanks again!

Max width will depend on your target audience. I use a max width of 1200, some prefer more like 1000, which I still use on occasion. Few anymore use 800, but a few still do.

No, I'm definitely not saying use absolute positioning unless absolutely necessary. I'm saying use divs, floats, and use the natural document flow.

Most browsers let you turn off javascript and images, or offer plugins to let you do that. If yours doesn't, look for a plugin, usually under developer tools.

Interesting choice of username. You wouldn't, perchance, be into catapults, trebuchets, and the like?

tim

Thanks... nope, just whips, leather and chains...

Seriously though, how do you go about setting a page up without absolute positioning? As far as positioning goes, what is the best option and why? Thanks again!!

best option is no positioning at all. Just use the document flow.
Positioning is ONLY needed when an element neds to be moved from it's natural position.

Originally Posted by chrishirst

best option is no positioning at all. Just use the document flow.
Positioning is ONLY needed when an element neds to be moved from it's natural position.

OK, not sure I quite get you (document flow)? So lets say for instance I want a banner at the top, centered in the middle of the page. This is followed by a set of links below this but justified to the left. Next some text for the body but also centered in the page below the banner but to the right of the set of links... etc., etc.,... How would you go about this?? Thanks again!

So a fairly standard two column layout then?

gimme about 10 mins (give or take)

Originally Posted by chrishirst

So a fairly standard two column layout then?

gimme about 10 mins (give or take)

Yes. Thank you! I really appreciate the help...

http://www.modtalk.co.uk/_site/layou...n/with-header/

http://www.modtalk.co.uk/_site/layou...ader/style.css

(the phone rang)

Originally Posted by pityocamptes

OK, not sure I quite get you (document flow)? So lets say for instance I want a banner at the top, centered in the middle of the page. This is followed by a set of links below this but justified to the left. Next some text for the body but also centered in the page below the banner but to the right of the set of links... etc., etc.,... How would you go about this?? Thanks again!

IE sure annoyed lot of people in the past. Problem is majority of your users gonna use IE, so you cant ignore it.

For the centered content just define a style like this

#container {magin:0 auto 0 auto;text-align:left;width:900px;}

This would create a 900px wide container centered in the middle of the page with the content inside left aligned.

Now apply this to your html like this:
<html>
<body>
<div id="container">
Bla Bla Bla....
</div>
</body>
</html>

Thanks! The biggest problem I am running into (having to absolutes) is a background picture centered in the middle of the page and that starts at about 150px down from the top. I'm not sure how to do this with the two column design as indicated above. Thanks!

background-position: 150px center;

http://www.w3schools.com/css/pr_background-position.asp

I don;t knw so much on CSS, but my friend make a separate and exclusive CSS for IE alone just to make an almost perfect design.

OK, for some reason when I insert the buttons the main box drops. Why? Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Guns, Grub and Gold</title>
  <link rel="icon" href="images/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="style.css">
  <![if IE]>
   <link rel="stylesheet"  type="text/css" href="SpacerMasterIE.css">
  <![endif]>
 </head>
 <body>
     <div id="main">
   <div id="header">
    <img src="images/Logo3.jpg" width="728" height="128" alt="Guns, Grub and Gold" title="Guns, Grub and Gold" />
   </div>
    <div id="col_left">
     <span id="siteseal">
            <script type="text/javascript"
              src= "https://seal.godaddy.com/getSeal?sea...6a0h"></script>
                   <br/>
                 <a style="font-family: arial; font-size: 9px" href="http://help.godaddy.com" target="_blank">
                        Go Daddy</a></span>
                    <FORM method="get" action="https://www.gunsgrubandgold.com/About Us.html">
         <input class="link" type="submit" value="About Us"  />
                 </FORM>
                 <FORM method="get" action="https://www.gunsgrubandgold.com/Contact.html">
                     <input class="link" type="submit" value="Contact" />
                 </FORM>
                 <FORM method="get" action="https://www.gunsgrubandgold.com/Index.html">
                     <input class="link" type="submit" value="Home" />
        </FORM>
                 <FORM method="get" action="https://www.gunsgrubandgold.com/Financials.html" >
                     <input class="link" type="submit" value="Financials" />
                 </FORM>
                 <FORM method="get" action="https://www.gunsgrubandgold.com/Food.html" >
                     <input class="link" type="submit" value="Food"  />
                 </FORM>
                 <FORM method="get" action="https://www.gunsgrubandgold.com/forum/" >
                     <input class="link"  type="submit" value="Forum" />
                 </FORM>
                 <FORM method="get" action="https://www.gunsgrubandgold.com/Products.html">
                     <input class="link" type="submit" value="Products" />
                 </FORM>
                 <FORM method="get" action="https://www.gunsgrubandgold.com/Protection.html">
                     <input class="link" type="submit" value="Protection" />
                 </FORM>
    </div>
    <div id="col_right">
     Right Column at auto width
     Content goes here
    </div>

   </div>
</body>
</html>

@charset "utf-8";
/* local CSS Document */

html, body 
{
 height:100%;
 padding:0;
 margin:0;
 background-color:black;
 background-image:url(images/Mask9.jpg);
 background-position:absolute;
 background-repeat:no-repeat;
}
#main 
{
 height:100%;
 width:90%;
 padding:0;
 margin:0 auto;
 color: #000000;
}
#header 
{
 width:100%;
 height:130px;
 background-color:#336699;
 color: #FFFF99;
 text-align:center;
}
#col_left 
 width:10%;
 border:1px solid red;
 height:900px;
 float:left;
}
#col_right
{
 border:1px solid blue;
 height:900px;
 padding:4px 5px;
}
.link
{
 border:outset;
 border-color:#0F0;
 background-color:#30F;
 color:#000;
 width:100px;
 font-weight:bold;
 margin:2px;
}

My mistake! Forgot to add a curly bracket to the CSS sheet. Works now! Modifying it, hopefully I will get it done soon...

OK, got most of it working. I would like a "footer" area, just like the header (spans the whole page width). However, when I tried to do that (using the same format as header) it is only as wide (using borders to see where it is located) as the second column. Not sure how to get it to span the entire page like the header... Here is my code so far...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Guns, Grub and Gold</title>
  <link rel="icon" href="http://www.webmaster-talk.com/images/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="http://www.webmaster-talk.com/images/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="style.css">
  <![if IE]>
   <link rel="stylesheet"  type="text/css" href="SpacerMasterIE.css">
  <![endif]>
 </head>
 <body>
     <div id="main">
   <div id="header">
    <img src="http://www.webmaster-talk.com/images/Logo3.jpg" width="728" height="128" alt="Guns, Grub and Gold" title="Guns, Grub and Gold" />
   </div>
    <div id="col_left">
     <span id="siteseal">
            <script type="text/javascript"
              src= "https://seal.godaddy.com/getSeal?sea...6a0h"></script>
                 <a style="font-family: arial; font-size: 9px" href="http://help.godaddy.com" target="_blank">
                        Go Daddy</a></span>
        <div id="box1">
                     <FORM method="get" action="https://www.gunsgrubandgold.com/About Us.html">
          <input class="link" type="submit" value="About Us"  />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Contact.html">
                      <input class="link" type="submit" value="Contact" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Index.html">
                      <input class="link" type="submit" value="Home" />
         </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Financials.html" >
                      <input class="link" type="submit" value="Financials" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Food.html" >
                      <input class="link" type="submit" value="Food"  />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/forum/" >
                      <input class="link"  type="submit" value="Forum" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Products.html">
                      <input class="link" type="submit" value="Products" />
                  </FORM>
                  <FORM method="get" action="https://www.gunsgrubandgold.com/Protection.html">
                      <input class="link" type="submit" value="Protection" />
                  </FORM>
        </div>
        <div id="box2">
         <img src="http://www.webmaster-talk.com/images/WeThePeople.jpg" width="126" height="84" title="We The People"
          alt="We The People" />
        </div>
    </div>
    <div id="col_right">
        <div class="about">
            <h1 style="text-align:center;text-decoration:underline">What We Are About</h1>
           </div>
        <div class="about" style="padding-left:0px">
 About Content Here
    </div>
    <div id="footer">
       Viral
        <br />
    Guns, Grub and Gold
        <br />
       Copyright 1999-2009 © GunsGrubandGold.com
           <br />
       Mail <a href="mailto:webmaster@gunsgrubandgold.com">Webmaster</a> with questions or comments about this site.
           <br />
       <a href="Terms.html">Terms and Conditions</a>
           <br />
           <br />
           <br />
       <img src="http://www.webmaster-talk.com/images/th_biohazard.gif" width="50" height="47" text="Biohazard" alt="Biohazard" />
   </div>
     </div>
 </body>
</html>

My bad again! Forgot to close the right col with a </div> tag!! Pesky things...

Right now I'm using Dreamweaver. Does anyone know how to in Dreamweaver, or recommend another program that will highlight in different colors different closing tags??? My eyesight is not what it used to be...