-Jim Posted March 23, 2009 Posted March 23, 2009 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 Posted March 23, 2009 Posted March 23, 2009 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 Posted March 23, 2009 Posted March 23, 2009 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 Posted March 23, 2009 Author Posted March 23, 2009 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.
powdarrmonkey Posted March 23, 2009 Posted March 23, 2009 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 Posted March 23, 2009 Posted March 23, 2009 (edited) Regarding the coloured scrollbars in IE, I'd agree. Dump the following code to get rid of them... <br /> BODY<br /> {scrollbar-3dlight-color:#308014;<br /> scrollbar-arrow-color:#00FF66;<br /> scrollbar-base-color:#orange;<br /> scrollbar-darkshadow-color:003300;<br /> scrollbar-face-color:#9BCD9B;<br /> scrollbar-highlight-color:#EEEEFF;<br /> scrollbar-shadow-color:#3B5E2B}<br /> 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 declaration line 32 column 1 - Warning: discarding unexpected line 73 column 1 - Warning: discarding unexpected line 73 column 7 - Warning: discarding unexpected line 68 column 1 - Warning: missing line 85 column 1 - Warning: missing line 133 column 1 - Warning: missing line 218 column 30 - Warning: entity " " doesn't end in ';' line 5 column 3 - Warning: line 64 column 1 - Warning: proprietary attribute "background" line 179 column 1 - Warning: proprietary attribute "bordercolor" line 219 column 1 - Warning: proprietary attribute "background" line 113 column 64 - Warning: trimming empty 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. Edited March 23, 2009 by PaulBM additional thoughts and missed a bit from the code section.
-Jim Posted March 24, 2009 Author Posted March 24, 2009 Regarding the coloured scrollbars in IE, I'd agree. Dump the following code to get rid of them... <br /> BODY<br /> {scrollbar-3dlight-color:#308014;<br /> scrollbar-arrow-color:#00FF66;<br /> scrollbar-base-color:#orange;<br /> scrollbar-darkshadow-color:003300;<br /> scrollbar-face-color:#9BCD9B;<br /> scrollbar-highlight-color:#EEEEFF;<br /> scrollbar-shadow-color:#3B5E2B}<br /> 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 declaration line 32 column 1 - Warning: discarding unexpected line 73 column 1 - Warning: discarding unexpected line 73 column 7 - Warning: discarding unexpected line 68 column 1 - Warning: missing line 85 column 1 - Warning: missing line 133 column 1 - Warning: missing line 218 column 30 - Warning: entity " " doesn't end in ';' line 5 column 3 - Warning: line 64 column 1 - Warning: proprietary attribute "background" line 179 column 1 - Warning: proprietary attribute "bordercolor" line 219 column 1 - Warning: proprietary attribute "background" line 113 column 64 - Warning: trimming empty 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 Posted March 24, 2009 Posted March 24, 2009 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 Posted March 24, 2009 Posted March 24, 2009 If you add the following to your css file the scrollbar problem should go away /* hide from IE mac \*/ html {overflow: scroll;} /* end hiding from IE5 mac */
powdarrmonkey Posted March 24, 2009 Posted March 24, 2009 Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere? CSS Tutorial
-Jim Posted March 24, 2009 Author Posted March 24, 2009 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 Posted March 24, 2009 Posted March 24, 2009 (edited) 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 Edited March 24, 2009 by mrwITch Duplicate info
-Jim Posted March 24, 2009 Author Posted March 24, 2009 If you add the following to your css file the scrollbar problem should go away /* 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 Posted March 25, 2009 Posted March 25, 2009 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...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now