New site with css problems

Hi, I am trying to create a website using very simple css (its the best i can do) for all the layout but i have hit serious problems that are beyond me to fix.

  1. the whole page seems to jump every time a link is clicked -probably as i have used the image for the page background as full size 980 x 780 and it loads on every page and it appears to jump. It may be something else, i really don’t have a clue. Is there a way to have the background image in an iframe or something so its permanent?

  2. a problem with positioning fixed on support,design,sourcing pages image strip for ie5 ie6 and possibly 7. I tried to do a hack for this from examples but i obviously didnt have a clue so it didnt work, just made things worse.

  3. when you click menu services and the menu expands the page jumps and everything moves up a few pixels

The site can be viewed here Lipau Global Solutions In Design

I am viewing in ie9 when i am working on this by the way and the page did not appear to jump in ie8 when i looked at it earlier today. perhaps it is a problem i only have in ie9. Can anyone tell me?

There’s no good reason I can think of why your bg would be re-loading again and again, unless your browsers have caching turned off (can happen). However, I notice everything’s in a table who doesn’t have table-layout: fixed. You can get browsers to load that table faster by telling them they don’t have to check ALL the rows and cols before rendering: even though you have a width stated, with table-layout: fixed you tell the browser to basically base everything on the first row.

You took care of the scrollbar possibly being an issue by forcing it every page.

I can’t see the other problems right now, no IE.


You have margin: 0 auto on #container, but no width. Automargins will be ignored.

Besides, everything’s in the table, who does have a fixed width. Why not margin: 0 auto the table instead?


	background-image: url(../images/pagebg.jpg);

	background-repeat: no-repeat;

	background-position: center top;

Condense properties. background: #fff url(…/images/pagebg.jpg) 50% 0 no-repeat;

Guess it’s now time for the obligatory “why is this page built in (nested!) tables? Do you hate blind people?” statement.

Also this


     <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12%" height="40" align="center" class="footermenuborder"><a href="index.html" class="footerlinks" title="home">HOME</a></td>
            <td width="14%" align="center" class="footermenuborder"><a href="about.html" class="footerlinks" title="about lipau">ABOUT</a></td>
            <td width="14%" align="center" class="footermenuborder"><a href="design.html" class="footerlinks" title="design">DESIGN</a></td>

            <td width="16%" align="center" class="footermenuborder"><a href="support.html" class="footerlinks" title="support">SUPPORT</a></td>
            <td width="16%" align="center" class="footermenuborder"><a href="sourcing.html" class="footerlinks" title="sourcing">SOURCING</a></td>
            <td width="16%" align="center" class="footermenuborder"><a href="contact.html" class="footerlinks" title="contact lipau">CONTACT</a></td>
            <td width="12%" align="center" class=""><a href="news.asp" class="footerlinks" title="news">NEWS</a></td>
            </tr>

Whoa, just use a list and some CSS.

You have a list for the submenu… did you know the rest of the menu can be a list?


<ul id="arrowsidemenu">
  <li><a href="index.html">HOME</a></li>
  <li><a href="about.html">ABOUT</a></li>
  <li id="menuheaders"><a href="services.html">SERVICES</a>
    <ul>
      <li><a href="design.html">DESIGN</a></li>
      <li><a href="support.html">SUPPORT</a></li>
      <li><a href="sourcing.html">SOURCING</a></li>
    </ul>
  </li>
  <li><a href="contact.html">CONTACT</a></li>
  <li><a href="news.asp">NEWS</a></li>
</ul>

Only reason I have an id on that Services is because it would be easier to target it with Javascript than if you had to walk the DOM for it. Also removed titles. Titles on anchors who already have anchor text is a sin as bad as nested tables but without the stigma.

I would have to see if I can find anything with IE when I get back to work, but with everything in tables… to be honest, I got into this whole web thing after tables kinda died for layout, so I’m not aware of too many issues specifically with IE and tables.

Hi Welcome to Sitepoint :slight_smile:

  1. IE always seem to have a slight jump like this when going to a new page and there’s not a great deal you can do about this. It seems to redraw the page again and you see the flicker.

I would start by optimising the background image as you have it at 87k and it could be optimised down to about 29k before anyone would notice the difference.

Then I would remove the image from the table and place it on the container to start with as tables are much slower than divs by default.

I would also add table-layout:fixed to the table as this increases the rendering of the table into one pass an not two.


.pagebg {
    height: 780px;
    width: 980px;
   [B] table-layout:fixed;[/B]
}
#container {
 [B]   margin: 0 auto;[/B]
    position:relative;
[B]    width: 980px;
    background: url(http://www.ehabitat.co.uk/lipau/images/pagebg.jpg) no-repeat 50% 0;[/B]
}


  1. Ie6 doesn’t support fixed positioning and with its low usage these days I would just give it position absolute as most of the hacks you see for making it position:fixed are broken anyway.

#imagestripdiv {
    position:fixed;
    left: 750px;
    width: 160px;
    height: 710px;
    overflow: hidden;
    top: 0px;
    padding: 0px;
}
[B]* html #imagestripdiv{position:absolute}[/B]


  1. I didn’t see a jump in any browser but I may have missed it.

The site though is an unhealthy mix of old and new and really needs converting to css and removing all those unnecessary tables and image maps. As you are a beginner I would let you get away with using one table for the left and right column with dividing border but everything else needs to be css and no tables. however, these days you should really only use tables for tabular data and the two columns should be floats instead.

There is a lot of code bloat associated with tables and we can take this section for example:


                <div id="pagetitlediv">
                    <table width="100%" border="0" cellspacing="2" cellpadding="2">
                        <tr>
                            <td height="30"  align="left" valign="top"><h1>HOME </h1></td>
                        </tr>
                    </table>
                </div>
                <div style="clear:both;"> </div>

It really should be just this:


<h1>HOME </h1>

At most you would need to add a class but of the headings were the same on all pages then it can be styled via context and no class needed.

The rest of the code however is redundant as you can do exactly what you want with the code above by using css to move it around and style it. There are many similar examples in the code also

You are also using absolute positioning to move elements around and that is bad also as you lose control of the flow of the document. If text is resized or content changes then it all goes to pot. It is far easier to let elements logically follow one after the other and simply use margins to push them into position. If you need horizontal alignment then you can float them.

I would expect that you could reduce the code in that page down to about 30 - 40% which will all add towards speeding thing up.

I realise a lot of what I said may go over your head but at least it will get you thinking about it :slight_smile:

Edit:

I see Stomme posted while I was typing this but you can see we are singing from the same song sheet :slight_smile:

Thanks for the tips. Most of it will go over my head…but it will get me thinking…only i don’t have as much time as i would like to ponder on it all just now and start to learn more, much as i’d love to. The site is needed very quickly, but at least i’ve got a start and some good advice to get on with it.

The site is for friends, she is a former head of design for a large multinational company so she is very particular about the layout. I read recently in a css article that a graphic designer will fight tooth and nail for a pixel I have found this to be true :smiley: so i tried this css layout as it offered better positioning than a lot of tables, which isn’t a good idea either. I am really pleased that this offers so much precision for layout and style and i’d really like to learn more.

Its good to know i don’t need so much of the redundant tables, i wil;l start to tidy up.

Thanks very much, it’s been a great help.