24 replies [Last post]
turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

I was testing my drop down menu in a public library the other day and noticed Mozilla was placing my content higher than all other browsers including IE for once!

It is placing the content so high up the page it is cutting off a corner with logo image and really annoying because if I change for firefox, every other browser
will place the content too low on the page.

http://www.toyboxpuppettheatre.com/shedlov1.html

Really fed up with all the browsers out there. Wish there was one compliant browser out there everyone used.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Wellll, there are one or more

Wellll, there are one or more highly compliant browsers. Firefox being among the best, if not the best. A big part of your problem lies in your page's structure. I don't understand why your menus (other than the utility menu) are structurally in the #header; especially since they are not to be rendered that way. You're forcing a Γ (Gamma) shaped structure on a rectangular document element. Your css on the link and utility menu is OK. The link/image appears to be the page's top level heading, so should be wrapped in h1 tags. Float the h1 instead of the a. On the #header element, do this:

#header {
    margin: 0 auto;    /*a div has no default margins, and 
                         you're not centering #header*/
    padding: 0;        /*a div has no default padding*/
    width: 100%;       /*a div is 100% width by default, but
                         if you make it explicit, any padding, borders
                         or margin will cause it to exceed its 
                         parent's width*/
    overflow: hidden;  /*causes the element to enclose its 
                         descendent float elements*/   
    }

You may want or need to zero h1's margins.

Separate those menus from the #header, and put them in their own container; say #menus. Float that container left. The other column is wa-ay over-specified. Use this:

#content2 {
    float: right;
    font-size: 1em;
    margin: -350px 0 0;
    position: relative;
    top: 0;
    width: 630px;
    overflow: hidden;
    }

.narrowcolumn {
    float: left;
    margin: 0 0 0;
    padding: 0 0 10px 15px;  /*make this right margin on  
                               the #menus*/
    }

.narrowcolumn, .widecolumn {
    line-height: 1.6em;      /*This and font size are global 
                               properties; put them on body*/
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Made the changes you

Made the changes you suggested Gary but I must have something wrong because it turned out like this:

http://www.toyboxpuppettheatre.com/showstest.html

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

NEVERMIND! You are a css guru

NEVERMIND! You are a css guru Gary!!! I don't begin to understand what you've done but it works so thank you very very much :DDDD

http://www.toyboxpuppettheatre.com/showstest.html

http://www.toyboxpuppettheatre.com/shedlovtest.html

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

OOPS

There's one tiny problem! my utility menu is in wrong position now Sad

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I should have been more

I should have been more explicit. Leave the utility menu in the #header.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Yes I worked that out but now

Yes I worked that out but now having problems with the footer either being cut off or not in same position as rest of site...it's all getting very confusing.
The reason it is getting confusing is because I 'feel' my way through css and logic or understanding rarely enters into it!

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Finally worked out my mistake

with a bit of logic :PP

had to put footer back in original content style and only have middle bit in simpler content2

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

another thing noticed with content2 width

photo is being cut off - it seems to want a width and a margin so is that alright to put in content2?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Once more again

Another change or three Wink

#page {
    margin: 10px auto 1.25em;
    overflow: hidden;
    padding: 0;
    width: 880px;
    }

#footer {
    background-color: #282828;
    clear: both;
    color: #E2E2E2;
    padding: 10px 0;
    position: relative;
    text-align: center;
    top: 70px;
    width: 100%;
    }

Move the footer out of #page, like so:

    </div> <!-- end #page -->

    <div id="footer">
      <ul>
        <li class="first">
          <a href="http://toyboxpuppettheatre.com" rel="nofollow">Home</a>
        </li>
        ...
    </div> <!-- end #footer -->
  </body>
</html>
There's a better way to do that, but it's not enough better to risk confusing more than I already have.

If you're going to continue with web development, you will need to learn the rational ins and outs of html and css. Throwing *stuff* at the wall hoping something will stick only get you so far. Then all that's left is the smell.Sad

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Ok I'm really sorry to have

Ok I'm really sorry to have wasted your time but my page looks like a dog's breakfast now lol

I really seriously do not want to be involved in web development, I simply do it to save money.
Teachers like yourself would rather work with willing students then just hand out code, I know but..

just not mathematically inclined, what might take the normal person a few minutes to really understand takes me hours and then I never retain much of what I learned.....

Anyway, I'm going to have to stick with my original because at least I worked it out in my own weird way whereas with your code, I'm just
copying and hoping it will work plus I keep obviously not getting html right. I did take footer out of page and tried with and without content
div around it but all I ended up with was a footer stretching across bottom of screen and my image disappeared way down the page.

I have to reinstall a whole new version of zen cart haha can you imagine how long that will take me? So I can't spend anymore time on this. I think I will simply move my images down the page a bit more to allow for firefox with my messy code.

Now I am going to stop and watch the walking dead Smile)))

Thanks VERY much Gary- I will leave my test pages up so others might learn from you.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'm not asking you to

I'm not asking you to understand, simply apply my suggestions by rote. Here is the html as modified. The css edits are explicit in the thread.

<!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>
    <link rel="icon" type="images/favicon.ico" href=
    "http://toyboxpuppettheatre.com/favicon.ico" />
    <title>test document
    </title>
    <meta http-equiv="content-type" content=
    "text/html; charset=utf-8" />
    <meta name="description" content=
    "Australian children's puppet theatre presenting fairytales from around the world with original music and handcrafted marionettes." />
    <meta name="keywords" content=
    "children, kids, music, puppets, marionettes, handcrafted, fairytales, three little pigs, folk, Austraian, toybox puppet theatre" />
    <link rel="stylesheet" href="http://www.toyboxpuppettheatre.com/styletest.css" type="text/css"
    media="screen" />
  </head>
 
  <body>
    <div id="page">
      <div id="header">
        <a href="http://toyboxpuppettheatre.com">
	  <img id="logo-image" 
	       src="images/logo4.png" 
	       alt="Australia&apos;s Own Toybox Puppet Theatre" /></a>
 
        <ul id="utility-links">
          <li class="first">
            <a href="contact.html">Contact</a>
          </li>
 
          <li>
            <a href="links.html">Links</a>
          </li>
 
          <li>
            <a href="sitemap.html">Site Map</a>
          </li>
 
          <li>
            <a href="/store">Shopping Cart</a>
          </li>
        </ul>
      </div>
      <div id="menus">
        <ul id="main-nav">
          <li id="home">
            <a href="index.html">Home</a>
          </li>
 
          <li id="about">
            <a href="about.html">About</a>
          </li>
 
          <li id="bios">
            <a href="bios.html">Bios</a>
          </li>
 
          <li id="shows">
            <a href="shows.html">Shows</a>
          </li>
        </ul>
 
        <div id="previous-features">
          <ul id="dug-nav">
            <li>
              <h2 class="entry-title">
                Shedlov The Loafer
              </h2>
            </li>
 
            <li>A Russian tale which toured in &apos;95.
            </li>
 
            <li>
              <a href="shedlov1.html">Photo</a>
            </li>
 
            <li>
              <a href="shedlov2.html">Media</a>
            </li>
 
            <li>
              <a href="shedlov3.html">Feedback</a>
            </li>
 
            <li>
              <a href="shedlov4.html">Music</a>
            </li>
          </ul>
 
          <ul id="back-nav">
            <li>
              <a href="pigs1.html">Three Little Pigs</a>
            </li>
 
            <li>
              <a href="red1.html">Little Red Riding Hood</a>
            </li>
 
            <li>
              <a href="gruff1.html">Three Billy Goats Gruff</a>
            </li>
          </ul>
        </div>
 
        <ul id="main-nav2">
          <li id="photos">
            <a href="photos.html">Photos</a>
          </li>
 
          <li id="media">
            <a href="media.html">Media</a>
          </li>
 
          <li id="music">
            <a href="music.html">Music</a>
          </li>
 
          <li id="gallery">
            <a href="gallery.html">Children&apos;s Gallery</a>
          </li>
 
          <li id="store">
            <a href="/store">Shop</a>
          </li>
 
          <li id="puppetsplaster">
            <a href="puppetsplaster.html">Puppets and Plaster</a>
          </li>
 
          <li id="workshops">
            <a href="workshops.html">Workshops</a>
          </li>
        </ul>
      </div>
 
      <div id="content2" class="narrowcolumn">
        <img src="images/SHEDANlg.jpg" alt="Shedlov photo" />
      </div>
 
      <!-- The following empty element should be removed -->
      <div id="content" class="narrowcolumn"></div>
    </div> <!-- end #page -->
 
    <div id="footer">
      <ul>
        <li class="first">
          <a href="http://toyboxpuppettheatre.com">Home</a>
        </li>
 
        <li>
          <a href="about.html">About</a>
        </li>
 
        <li>
          <a href="bios.html">Bios</a>
        </li>
 
        <li>
          <a href="shows.html">Shows</a>
        </li>
 
        <li>
          <a href="photos.html">Photos</a>
        </li>
 
        <li>
          <a href="gallery.html">Gallery</a>
        </li>
 
        <li>
          <a href="media.html">Media</a>
        </li>
 
        <li>
          <a href="music.html">Music</a>
        </li>
 
        <li>
          <a href="contact.html">Contact</a>
        </li>
 
        <li>
          <a href="links.html">Links</a>
        </li>
 
        <li>
          <a href="sitemap.html">Site Map</a>
        </li>
 
        <li>
          <a href="/store">Shopping Cart</a>
        </li>
      </ul>
 
      <p>
        Copyright © 2012 Toybox Puppet Theatre | All Rights
        Reserved | Web Site Design by <a href="http://www.charliesite.com">charliesite</a>
      </p>
  </div>  
  </body>
</html>

Do give this a try.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: I simply do it to save

Quote:

I simply do it to save money.

oh well then you'll find yourself largely on your own Wink we tend to favour giving our unpaid support and experience - time taken out of our professional working hours when it's for helping people who have an inclination to learn or who have a love of coding and development. I'm afraid stating what you did is not going to help your cause Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Hugo, whether people go to

Hugo, whether people go to school to learn to become pros or they learn from reading and tutorials and forums- the end result is the same- they are either trying to make money or save money so I have to say your point is moot.

My only feeling of guilt is don't have time to really learn the bones of CSS and so like the majority of people on forums trying to find quick fixes, the fact remains regardless of help, I have been learning html, photoshop, illustrator, premiere, flash animation and css and now ecommerce since 1994. I don't learn from you guys so I can go out and PROFIT by selling web design to others. I do not consider myself a professional, I am an artist really and I need to do these things to best display my art. I really don't appreciate your rather nasty comment,Hugo, especially when Gary has been extremely helpful and I have been so honest with him. Be that is it may.,,,,

Thanks Gary, I will follow your instructions when I get back from rehearsals and I appreciate you for your wisdom and time.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

The footer remains spread

The footer remains spread across the entire width of the page and the photo is cut in half.

This is exactly what happened when I followed the instructions before so there's still a problem
with content width and footer width and position. hmmmm

What do you think Gary besides my being an idiot? ;P

http://www.toyboxpuppettheatre.com/shedlovtest.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Are you viewing in IE's

Are you viewing in IE's compatibility mode? That's the only way I get the screwed up layout and cut image. See screen cap below.

Regarding the footer, I left it full window width simply because it looks better to me. You have a different bg color on the footer, and to set its width to match the page, makes the footer look like an afterthought, just stuck on. The text is centered on the page, and letting the bg expand to the window's width gives it the effect of being a base for the page. If you really don't like it, set #footer's width equal to #page's, and set the {margin: 0 auto;}.

cheers,

gary

AttachmentSize
puppets.jpg 78.86 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Must have been cache because

Must have been cache because it has righted itself this morning. 'duh'

Imagined you preferred look of the footer as you have it now but I actually prefer it tagged
on as a small strip. However I like that yours is anchored to the bottom. Will play with it when
get back. THANK YOU VERY MUCH GARY. I can hold you responsible for the improvement of my site
from when I first came on here with the html5 mess - if you hadn't made the suggestion to switch to
xhtml strict I'd never have it up and running!

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Think you've put a spell on

Think you've put a spell on my footer Gary!

I've changed tp align left and width matching page although i really want it 630 not 880 and
strangely no matter how much refreshing i do it remains the same.

Think maybe my computer needs a rehaul, i dunno but my browsers are not behaving.
To test to see if I'm going crazy I put in other linked stylsheet to see if it would change- it did
and then back again to this one and the footer magically remains centred text and spread across screen WTH?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'm looking at your

I'm looking at your stylesheet, http://www.toyboxpuppettheatre.com/styletest.css and it has this:

#footer {
 
 
 
 
 
	color:#e2e2e2;
 
	padding: 10px 0;
 
 
 
 
	text-align:center;
 
	background:#282828;
 
 
 
	}

So you've either modified the wrong file, or you forgot to save it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

actually have a bug or virus

actually have a bug or virus as all my programs and browsers are playing up. Sad

doing really weird stuff and have to keep rebooting.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Do I float right to make the

Do I float right to make the footer go in line with content?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

So, have you made the changes

So, have you made the changes I gave you? If so, exactly what do you want it to do differently, because I can't imagine you wanting anything other than centered under the page. (You have 20px left margin on the ul that throws the centering off.)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Well, I just want the footer

Well, I just want the footer to be in same position it is on every other page outside of shows dropdown menu....

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

directly under the main

directly under the main content but not centre of whole page. So guess the reason not possible is
because footer is outside the content div.

But you have totally fixed the problem with content inconsistency across browsers had enough help to get me going and will redo it when have time. thanks again Smile

then i'll repost completed link so other forum users can work out what you've done.

turtlebean
turtlebean's picture
Offline
Regular
Last seen: 9 years 36 weeks ago
Timezone: GMT+11
Joined: 2011-12-04
Posts: 35
Points: 42

Yes, I've changed now all

Yes, I've changed now all show pages to your code except for footer part. It's working like a treat and tested perfectly at library today removing problem I had with images. Party