Having webpages keep consistent look

**-Jim** · 23rd March 2009, 05:17 PM

I am trying to keep my basic outline the same from page to page. I come across a problem when a one page has more content on it and it require a vertical scroll, versus a page that all content fit on the screen.

Look at these 2 pages and notice how on #1 the outline is wider and the link; 'Research Services, Company Profile, etc" move slightly to the right. I would like to keep these inline with #2 so that they dont move when going from page to page and I cant seem to figure it out.

1) Shamrock Structures, LLC -- -AssesEXPRESS : Protein Gallery

2) Shamrock Structures, LLC -- About Shamrock Structures

**beeswax** · 23rd March 2009, 08:37 PM

Does this happen in both FF and IE? With IE even if there is no scrollbar to the right of the window, the scrollbar placeholder remains so that your page doesn't jump. With FF you only get a scrollbar if the content merits it, so as you move from page to page you can get a slight jump depending if the scrollbar is there or not.
Of course I could be barking up the wrong tree and have misinterpreted your question.

**chrbb** · 23rd March 2009, 09:44 PM

I may have the wrong end of the stick, but is it when you go from the home page to the three links in the Research services box? If so there's a couple of pixels difference in width, try using the same logo as the home page and the other main pages to see if that makes a difference. Even though your table is the same width - 800 on all pages, html does very odd things sometimes!

**-Jim** · 23rd March 2009, 09:49 PM

Weird....I posted a reply but it never showed up.

Yes, it does just happen in FF. In IE the shift is very very minuscule and something I can live with.

chrbb, I will check on the logo too, thx.

Also, for those viewing it in IE, doesnt the green scrollbars look tacky for a business website? I inherited this website and I am trying to improve it (Im no design expert by any stretch of the imagination). Wanted your thoughts.

**Little-Miss** · 23rd March 2009, 09:56 PM

This is where CSS comes in handy..

**powdarrmonkey** · 23rd March 2009, 10:02 PM

IIRC, there's a CSS parameter for the body tag that forces the scrollbar to stay on screen (like the IE default behaviour). Think it's something to do with Overflow.

**PaulBM** · 23rd March 2009, 10:18 PM

Regarding the coloured scrollbars in IE, I'd agree. Dump the following code to get rid of them...

Code:

  <style>
BODY
{scrollbar-3dlight-color:#308014;
         scrollbar-arrow-color:#00FF66;
         scrollbar-base-color:#orange;
         scrollbar-darkshadow-color:003300;
         scrollbar-face-color:#9BCD9B;
         scrollbar-highlight-color:#EEEEFF;
         scrollbar-shadow-color:#3B5E2B}
</style>

My first port of call on any website with any problems is validation. Using HTML Tidy with Firefox reveals 13 warnings...

Result: 0 errors / 13 warnings

line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 32 column 1 - Warning: discarding unexpected <head>
line 73 column 1 - Warning: discarding unexpected </div>
line 73 column 7 - Warning: discarding unexpected </td>
line 68 column 1 - Warning: missing </div>
line 85 column 1 - Warning: missing </div>
line 133 column 1 - Warning: missing <li>
line 218 column 30 - Warning: entity "&nbsp" doesn't end in ';'
line 5 column 3 - Warning: <style> inserting "type" attribute
line 64 column 1 - Warning: <td> proprietary attribute "background"
line 179 column 1 - Warning: <table> proprietary attribute "bordercolor"
line 219 column 1 - Warning: <td> proprietary attribute "background"
line 113 column 64 - Warning: trimming empty <p>
Info: Document content looks like HTML Proprietary

Fix these and then check again, it's possible that some of these warnings could be causing inconsistencies.

Also try moving all the Style into a stylesheet (.CSS). Then you'll have 100% consistent styling across all pages.

**-Jim** · 24th March 2009, 02:46 PM

Originally Posted by PaulBM

Regarding the coloured scrollbars in IE, I'd agree. Dump the following code to get rid of them...

Code:

  <style>
BODY
{scrollbar-3dlight-color:#308014;
         scrollbar-arrow-color:#00FF66;
         scrollbar-base-color:#orange;
         scrollbar-darkshadow-color:003300;
         scrollbar-face-color:#9BCD9B;
         scrollbar-highlight-color:#EEEEFF;
         scrollbar-shadow-color:#3B5E2B}
</style>

My first port of call on any website with any problems is validation. Using HTML Tidy with Firefox reveals 13 warnings...

Result: 0 errors / 13 warnings

line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 32 column 1 - Warning: discarding unexpected <head>
line 73 column 1 - Warning: discarding unexpected </div>
line 73 column 7 - Warning: discarding unexpected </td>
line 68 column 1 - Warning: missing </div>
line 85 column 1 - Warning: missing </div>
line 133 column 1 - Warning: missing <li>
line 218 column 30 - Warning: entity "&nbsp" doesn't end in ';'
line 5 column 3 - Warning: <style> inserting "type" attribute
line 64 column 1 - Warning: <td> proprietary attribute "background"
line 179 column 1 - Warning: <table> proprietary attribute "bordercolor"
line 219 column 1 - Warning: <td> proprietary attribute "background"
line 113 column 64 - Warning: trimming empty <p>
Info: Document content looks like HTML Proprietary

Fix these and then check again, it's possible that some of these warnings could be causing inconsistencies.

Also try moving all the Style into a stylesheet (.CSS). Then you'll have 100% consistent styling across all pages.

Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere? Basically I'm able to sorta figure out what the stuff means, make changes, see if the change was what wanted and try again if not. But as far as creating a new CSS style sheet, I would not know where to start.

**beeswax** · 24th March 2009, 02:52 PM

Before you begin hacking your stylesheets make a copy of the original ones and put them somewhere safe, just in case you mess up.

**CESIL** · 24th March 2009, 03:06 PM

If you add the following to your css file the scrollbar problem should go away

Code:

/* hide from IE mac \*/
html {overflow: scroll;}
/* end hiding from IE5 mac */

**powdarrmonkey** · 24th March 2009, 04:31 PM

Originally Posted by -Jim

Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere?

CSS Tutorial

**-Jim** · 24th March 2009, 04:58 PM

So what CSS style would I use to get all the borders of my table (the green) the same width? Cause right now the top border is bigger than the sides.

Untitled Document

**mrwITch** · 24th March 2009, 06:29 PM

Originally Posted by -Jim

Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere? Basically I'm able to sorta figure out what the stuff means, make changes, see if the change was what wanted and try again if not. But as far as creating a new CSS style sheet, I would not know where to start.

A starting point for CSS (& other stuff)
CSS Tutorial

OOPs - sorry powdarrmonkey didn't read all of the posts

**-Jim** · 24th March 2009, 07:05 PM

Originally Posted by cadjs

If you add the following to your css file the scrollbar problem should go away

Code:

/* hide from IE mac \*/
html {overflow: scroll;}
/* end hiding from IE5 mac */

does this make the scroll bar always visible? if so, is there a similar command for firefox and safari?

**CESIL** · 25th March 2009, 10:14 AM

Originally Posted by -Jim

does this make the scroll bar always visible? if so, is there a similar command for firefox and safari?

This should work in all browsers...

LinkBack

Thread Tools

Search Thread

Having webpages keep consistent look

Similar Threads

Cant Print Webpages on Samsung CLP-600N

Thread Information

Users Browsing this Thread

Posting Permissions