+ Post New Thread
Results 1 to 15 of 15
Web Development Thread, Having webpages keep consistent look in Coding and Web Development; I am trying to keep my basic outline the same from page to page. I come across a problem when ...
  1. #1

    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    25
    Thank Post
    9
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    Having webpages keep consistent look

    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

  2. #2

    beeswax's Avatar
    Join Date
    Jul 2005
    Location
    England
    Posts
    2,285
    Thank Post
    285
    Thanked 225 Times in 153 Posts
    Rep Power
    131
    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.

  3. #3
    chrbb's Avatar
    Join Date
    Oct 2005
    Location
    Midlands
    Posts
    1,507
    Thank Post
    141
    Thanked 67 Times in 62 Posts
    Rep Power
    46
    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!

  4. #4

    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    25
    Thank Post
    9
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    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.

  5. #5

    Little-Miss's Avatar
    Join Date
    Oct 2007
    Location
    London
    Posts
    5,515
    Thank Post
    2,374
    Thanked 742 Times in 455 Posts
    Blog Entries
    2
    Rep Power
    541
    This is where CSS comes in handy..

  6. #6

    powdarrmonkey's Avatar
    Join Date
    Feb 2008
    Location
    Alcester, Warwickshire
    Posts
    4,859
    Thank Post
    412
    Thanked 777 Times in 650 Posts
    Rep Power
    182
    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.

  7. #7

    Join Date
    Jan 2007
    Location
    Lowestoft, Suffolk
    Posts
    84
    Thank Post
    6
    Thanked 4 Times in 4 Posts
    Rep Power
    16
    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.
    Last edited by PaulBM; 23rd March 2009 at 10:22 PM. Reason: additional thoughts and missed a bit from the code section.

  8. #8

    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    25
    Thank Post
    9
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Quote Originally Posted by PaulBM View Post
    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.

  9. #9

    beeswax's Avatar
    Join Date
    Jul 2005
    Location
    England
    Posts
    2,285
    Thank Post
    285
    Thanked 225 Times in 153 Posts
    Rep Power
    131
    Before you begin hacking your stylesheets make a copy of the original ones and put them somewhere safe, just in case you mess up.

  10. #10

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,403
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    168
    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 */

  11. #11

    powdarrmonkey's Avatar
    Join Date
    Feb 2008
    Location
    Alcester, Warwickshire
    Posts
    4,859
    Thank Post
    412
    Thanked 777 Times in 650 Posts
    Rep Power
    182
    Quote Originally Posted by -Jim View Post
    Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere?
    CSS Tutorial

  12. #12

    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    25
    Thank Post
    9
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    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

  13. #13

    Join Date
    Feb 2009
    Posts
    45
    Thank Post
    1
    Thanked 5 Times in 5 Posts
    Rep Power
    12
    Quote Originally Posted by -Jim View Post
    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
    Last edited by mrwITch; 24th March 2009 at 06:30 PM. Reason: Duplicate info

  14. #14

    Join Date
    Mar 2009
    Location
    Chicago
    Posts
    25
    Thank Post
    9
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Quote Originally Posted by cadjs View Post
    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?

  15. #15

    CESIL's Avatar
    Join Date
    Nov 2006
    Location
    Hampshire
    Posts
    1,403
    Thank Post
    109
    Thanked 267 Times in 198 Posts
    Rep Power
    168
    Quote Originally Posted by -Jim View Post
    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...

SHARE:
+ Post New Thread

Similar Threads

  1. Cant Print Webpages on Samsung CLP-600N
    By scampy in forum Windows
    Replies: 2
    Last Post: 25th June 2007, 07:04 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •