By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,970 Members | 1,668 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,970 IT Pros & Developers. It's quick & easy.

Web Site Help and Opinion

tharden3
100+
P: 916
Alrighty, well I've posted many questions in several forums to help me get this far. I've changed many things that all of you at Bytes have suggested to make my Web Page Better. I need your opinion and input on my current version. Its just the outline (no text or content) but I want to make sure everything is good up to this point. What are your suggestions> link

I did find a problem (reason for the edit of this post). A lot of computers still run IE6. My site looks fine in Firefox, IE7, and others.... except IE6. I'd rather you look at the problem than me spend 3 paragraphs trying to explain it. http://ipinfo.info/netrenderer/index.php <----- use this link (you'll be able to see my site in an online rendering program that allows you to view the HTML/CSS in different versions of IE). Look at this site: http://connectar33.110mb.com/index.html
1.) view it in IE7, and you'll see that the navigation bar is fine.
2.) view it in IE6 or 5.5 and you'll see that it drifts far to the left.

Any suggestions as to some CSS or markup that will help me fix this problem in my navigation?

P.S. I checked both the CSS and HTML of my site, and both are valid.
Sep 11 '08 #1
Share this Question
Share on Google+
17 Replies


drhowarddrfine
Expert 5K+
P: 7,435
page link hangs. .
Sep 11 '08 #2

tharden3
100+
P: 916
ehh, sorry bout that doc. 110mb has been having problems with many of their server boxes.... I'll post it on another host. I'm at work right now, but I'll do it this evening.
Sep 11 '08 #3

Expert 100+
P: 397
Bingo! Congratulations, you done good and got rid of all that structural absolute positioning that you had...

Leave IE/6 and down in quirksmode with the xml declaration above the doctype just as you have it.
The corrections for the IE/6 and IE/5.5 issues are (put this stuff at the bottom of your style sheet):
1/ To prevent the horizontal auto expansion:
Expand|Select|Wrap|Line Numbers
  1. * html .all {                                
  2. overflow-y: hidden;
  3. }
  4.  
2/ To stop the IEs from doubling the horizontal margins:
Expand|Select|Wrap|Line Numbers
  1. * html #titlebox, 
  2. * html .navigation, 
  3. * html .horizontalNavText, 
  4. * html .navlinks  {                                 
  5.  display: inline;
  6. }
  7.  
3/ Cross-browser suggestions...

Correct the warning in the CSS validation regarding fonts.

Not a good idea to set height on the vertical nav-- the text will shoot the bottom out on font scaling, nor is the class needed in the html. Try this nav as a replacement for yours: vertical rollover navigation

You can safely delete the z-index rule (s) since you no longer have absolute positioning.

Bring all browsers to default setting this at the top of the CSS file:
Expand|Select|Wrap|Line Numbers
  1. html, body {
  2. background : #fff;
  3. color : #000;
  4. margin : 0;
  5. padding : 0;
  6. }
  7. body {
  8. font : 100%/1.4 Helvetica, Arial, sans-serif;
  9. }
  10. p { margin: 0;}
  11.  
Set "Lorum Ipsum" using <p></p> tag thingies in the center and right content blocks.Delete the heights on those blocks. Let those p's inherit default (100%). Check the page cross-browser at least +2 font-scaling, and at text-size "largest" in the IEs. Make sure the the floats not dropping, that the floats are properly cleared, that the text is not shooting out the bottom of the page, and that all otherwise performs as intended.

An aside:
IE/6, I regret to say is likely to be haunting us for sometime to come -- even after -- IE/8 hits the streets... so good idea to continue support. Whether this is also necessary for its twisted sister IE/5.5 may be a matter of more personal opinion than necessity... (although the above corrections should fix 6 and 5.5, or come fairly close to it).
Sep 12 '08 #4

tharden3
100+
P: 916
ahh, cool! Those are just the fixes I need. Thanks for the help. I'm afraid I won't be off work for another 8 hours or so, but when I get home this evening I will apply the changes. Thanks again.
Sep 12 '08 #5

tharden3
100+
P: 916
I'm pretty stoked to announce that after a few months of studying HTML/CSS, I'm off to a great start. Thank you guys for all the help you've provided. The current version renders properly in all web browsers, including IE 6 and 5.5 (thanks David Laakso for all the fixes and tips :D ). I think my next step is to set up the various pages, before I add any text, images, or multimedia. Any other suggestions?
Sep 20 '08 #6

Expert 100+
P: 397
I think my next step is to set up the various pages, before I add any text, images, or multimedia. Any other suggestions?
On the contrary, I think your next step is to prevent the text in the center panel from heading for the Equator, and prevent the text in the right column from heading to the Equator with heavy hand font-scaling. In plain English, clear the floats.

This is an example [1] of a page more complicated but nevertheless based specifically on yours (I liked your concept, thanks). The embedded CSS may be helpful. Stuck? Write back.
[1] 3col :: primary content 1st in source secondary content 2nd in source
Sep 20 '08 #7

tharden3
100+
P: 916
Please forgive me, I'm having trouble understanding what you are requesting. I did move the text away from the edges though. Could you clarify a bit? Thanks link
I do understand about the overall height though, I do need to change that so the text won't shoot out the bottom. What do I do?
Sep 20 '08 #8

Expert 100+
P: 397
I do understand about the overall height though, I do need to change that so the text won't shoot out the bottom. What do I do?
.all is used only once on the page so change it from a class to an id. Set no height on content bearing containers. Use what is called the "easy clearing" method. Amend the CSS to read:
Expand|Select|Wrap|Line Numbers
  1. #all {
  2. width: 920px; 
  3. background-color: #ffc87a; 
  4. margin: 0 auto; 
  5. overflow : hidden;
  6. text-align: left;
  7. }
  8. #all:after {
  9. content : '.';
  10. display : block;
  11. height : 0;
  12. clear : both;
  13. visibility : hidden;
  14. }
  15. #all {
  16. display : inline-block;
  17. }
  18. #all {
  19. display : block;
  20. }
  21.  
You may want to equalize the width of the gutters and side margins and center the header block horizontally.

Nowadays some of us subscribe to putting the primary content first in the source order of the document -- see the example.
Sep 21 '08 #9

tharden3
100+
P: 916
Nowadays some of us subscribe to putting the primary content first in the source order of the document -- see the example.
but if I put that first, won't it ruin my 'float' order in the markup?
Sep 21 '08 #10

Expert 100+
P: 397
but if I put that first, won't it ruin my 'float' order in the markup?
You will not be able to use your current method to put the primary content first.
And the world will not come to an end if you leave your layout as is.

Negative-margin float based layouts enable a designer to put any column first in the source order. The example of your page I put up is a negative-margin layout.

Whether you use what some Web designers, myself among them, consider as a more contemporary method is your call, not mine. Some say such layouts are possibly more screen reader friendly, possibly more search engine friendly, possibly easier to set a logical h1-h6 outline of the document structure, and possibly easier to produce print versions from. This method puts: primary content first in source, secondary content second in source, and tertiary content (vertical nav on your page) third in source, followed by the footer (if any).
Sep 21 '08 #11

tharden3
100+
P: 916
You will not be able to use your current method to put the primary content first.
And the world will not come to an end if you leave your layout as is.

Negative-margin float based layouts enable a designer to put any column first in the source order. The example of your page I put up is a negative-margin layout.
I've looked over the markup and CSS of the example you gave me, and it seems like it'd be a good idea to format my website the way you have suggested. I'm probably going to scrap pieces of my current markup, and lean more toward a negative-margin float based layout. It looks like editing headings and text will be a lot simpler this way too.

Not trying to get too ahead of myself, cause I still have a lot of work to do, but when I do get this up and running, I'd like to be able to post new "blogs" I guess you could call them (almost daily). Updating my site seems like it'd be a hassle if I didn't use any code like PHP. HTML is very static and will be a pain to change every time I want to post a new page. I'm not proficient in programming (yet), although I'm learning Python. Is there some open-source stuff I can "insert" into my source to allow me this capability? I'd like to be able to pretty much click, type, and post new "blogs" or "information".
Sep 22 '08 #12

Expert 100+
P: 397
I'd like to be able to pretty much click, type, and post new "blogs" or "information".
Have you looked into textpattern, wordpress, or expressionengine ?
Sep 22 '08 #13

tharden3
100+
P: 916
Have you looked into textpattern, wordpress, or expressionengine ?
are all these about on par with each other, or is there one that really stands out?
Sep 22 '08 #14

Expert 100+
P: 397
are all these about on par with each other, or is there one that really stands out?
Read what each has to offer and base your decision on which one meets your need?
Sep 22 '08 #15

tharden3
100+
P: 916
Read what each has to offer and base your decision on which one meets your need?
ok .
Sep 22 '08 #16

tharden3
100+
P: 916
I'm not sure if it's just my lack of web design intelligence, but I'm having a rather difficult time getting a blog on my website. I've tried several different sites, but it seems that as apposed to the site helping me to insert a blog to my web site, I'm having to modify what the other site has already made.
Sep 27 '08 #17

Expert 100+
P: 397
I've tried several different sites, but it seems that as apposed to the site helping me to insert a blog to my web site, I'm having to modify what the other site has already made.
Do it vice versa. Produce a blog whose "theme" is your site. You may find video #25 helpful. In the video tutorial a Wordpress bog is created using one of the many "themes" available for that application. It may give you an idea of how to create a blog using "your theme," rather than the theme used in the tutorial.
Sep 27 '08 #18

Post your reply

Sign in to post your reply or Sign up for a free account.