PDA

View Full Version : Can't View My Site



phanio
05-19-2009, 12:27 PM
Recently, I have been told by several partners that they cannot see parts of my site. e.g. they say they can see the header and my nav bar - but nothing else. I don't understand as it is all written in the same language. I also preveiw my site in all the browsers that I can download. Not sure what is happening.

Can others here look at my site and tell me if they are seeing the whole thing? Not looking for critiques as I know the site sucks - but just if someone else can see the whole page.

Thanks

KristineS
05-19-2009, 12:35 PM
I looked at it in Firefox and I could see it. Checked it out in IE 7 as well and it works. I'm seeing everything that's there.

vangogh
05-19-2009, 01:32 PM
Seems ok to me in Safari and Opera.


I don't understand as it is all written in the same language.

Yes, but browsers can interpret that language different. You also use more code to display the page than necessary. More code means more possibility of making a mistake. One browser could be forgiving, while another browser isn't.

Do you know if the problem is consistent? Do the same people always not see your page or did it all happen on one specific day? It's possible it was a temporary glitch with the page not loading fully for a time or it taking longer to load than the person viewing was willing to wait.

It looks like your layout is developed using tables. Browsers display the whole table at once after everything inside the table is ready. If the content of one table cell couldn't display for some reason the whole table might never display while the browser waited on that one item to load. Even with a css based site if something is taking a long time to load inside one div it could appear to the visitor that whole sections of the site aren't loading when it's more a case of them not waiting long enough for it to load.

If people are telling you they can't see the whole page ask them if they can tell you what operating system and browser they are using. If you can get the version of both it would help too.

nealrm
05-19-2009, 01:32 PM
I have the same issue. I can see the header, nav bar, footer and border but no content.
Sorry but I can't post a screen shot using this computer. However, here is my browser info.

IE Ver 6.0.2900.5512
Service Pack 3
Windows XP Pro

vangogh
05-19-2009, 01:36 PM
Probably an IE6 thing.

Looking quickly at your code I'd suggest the problem is all the absolute positioning. Positioning is generally not the best idea since it can cause all sorts of complications. It can be useful, but it's usually not necessary and it's definitely not necessary with your layout.

phanio
05-19-2009, 01:42 PM
Thanks - I have taught myself how to do much of this and started out with absolute positioning as this put things where I wanted them. I have tried several times to go back and take the positioning out - but I lose entire divs.

Thanks for the feed back - I will work on improving.

phanio
05-19-2009, 01:47 PM
Again - thanks for all. Could very easily be IE6 positing the div else where. What would really help is if everyone else in the world upgraded past IE 6 - just kidding.

Thanks - at least I have a good idea where to start.

vangogh
05-19-2009, 03:24 PM
Joesph absolute positioning is easy to wrap your head around, but too much of it can easily cause problems. Learn more about floating elements instead of positioning them. There's a learning curve, but in the end it works better.

Also look at your design and think first of the overall layout. Don't worry about what goes inside each of the major blocks. For example in your design I see 4 main blocks. Header, Sidebar, Main Content, Footer. Since your site is centered you might also want to wrap everything in a wrapper div. Your html might look like:



<body>
<div id="wrapper">
<div id-"header"></div>
<div id-"sidebar"></div>
<div id-"content"></div>
<div id-"footer"></div>
</div>
</body>


And then your css for the basic layout could be:



#wrapper {width: 960px; margin: 0 auto}
#header {}
#sidebar {float: left; width: 300px}
#content {float: left; width : 660px}
#footer {clear both}


I'm guessing at the widths, but that's really the basic way to layout your site. Then you'd fill each of these larger divs with the elements inside of them. There will be a few traps along the way, but if you start with something basic and then fill it in, I think you'll find it easier to code.

phanio
05-19-2009, 09:18 PM
Thanks for the tips - I will give that a try. I started absolute positioning as this was the only way I could find that allowed the site to float with the broswer - thus, when you minimize my site (not all the way minimized - just half page or quarter page) my site moves with it.

I think I understand the float concept - I have used it with some success for minor items. I do not understand the {clear both}.

Again, thank you so very much for the tips. I have realized for some time that I needed to fix the site - but have been putting it off as it seems like it will be quite a chore. I have been trying to focus on SEO - but, it is time. Thanks for the tips.

vangogh
05-19-2009, 10:26 PM
When you float (or position elements) you take them out of the normal document flow. In my example above, because I floated both the sidebar and the content divs the footer would want to sit below the header. Clearing says to sit below the floated elements. You can clear something to the left, the right, or both. With clear: both we're telling the footer to display below the sidebar and the content.

I understand why you went for the absolute positioning. I did too and I bet most everyone who starts learning css does as well. Positioning is an easy concept to grasp, while floats take a little practice. In the end floats turn out to be the better option for most things.

Glad to help with the tips. Like I said I did some of the same things you did. It takes time, but the good news is it will get easier.

phanio
05-20-2009, 08:14 AM
Vangogh,

Thanks for the help and tips. Will get working on it today.

vangogh
05-20-2009, 11:28 AM
Do share your progress an of course feel free to ask any questions you have.

nighthawk
05-20-2009, 05:22 PM
Its an IE6 issue, as mentioned previously. It is displaying fine for me in Firefox, but doesnt work in IE, see screenshot below. When viewing the source, all the content appears to be there, it just doesnt render.

http://img.photobucket.com/albums/v370/gavco98uk/website.jpg

phanio
05-20-2009, 05:55 PM
Nighthawk - thanks - boy does that look bad without the content - does not look that good with the content either.

I started re-creating the hoem page - doing pretty good so far without positioning. Do have a question, I used a wrapper tag (div). Then when putting inside that tag another div - float right - it put itself outside the first div.

Is there a certain order to way items items should be placed inside a div?

If you look at my page, when I put in my logo - I just use CSS - Text Align left. No problem. But, when I put in the next element (the advertisment) - it showed up outside the wrapper div). But, if I put this element before the logo - It seems to work fine - so, is there an order - especailly using the float atribute?

vangogh
05-20-2009, 06:43 PM
I'd have to see the code to know, but the inner div shouldn't float outside its container. Are you using positioning to center the wrapper div?

If you want to post the code or even better a link to the page if it's online somewhere and I'll help you figure out why it's not working.

phanio
05-20-2009, 08:52 PM
I am centering the wrapper - the reason is so that it will size with the browser - although now it is sizing properly in IE but not in Firefox, Safari, or Crome.

I think I got part of it figured out - but now I am having other issues.

To see what I am talking about: Untitled Document (http://businessmoneytoday.com/Test.php)

Thanks in advance for any help. I just keep trying different things - something is bound to happen.

vangogh
05-21-2009, 01:16 AM
A couple of things I see. Looks like you're using <div id="Main"> to wrap everything. To center it all you have to do is give that div a width and then give it a margin-right and margin-let of auto. You need to use a proper doctype for IE, but you already are. So:

#Main {width: 960px margin: 0 auto}

I'm guessing at the width.

Just some pointers. Use lower case so div id="main" instead of div id="Main" Both will work, but the convention is lower case. When you have something like div id="MainTextMain" use div id="main-text-main" It ends up being easier to read.

The second thing I notice is you have everything enclosed in your Header div. I think you want to close it after the WelcomeTag div instead.

phanio
05-21-2009, 06:48 PM
Again, thanks. I will implement that immeidately. Really appreciate the help. I am having one more problem. In IE - my borders disapear in the middle - it is really strange to see - does not do it in other browsers - I think it has something to do with the float and then not clearing them. I will try several different things to see if I can fix it.

Thanks for you help - may you should write a book - I would purchase and promote.

vangogh
05-21-2009, 10:28 PM
Which div is losing the borders? It's not quick for me to look in IE anymore. It might be that something in IE is overriding how you set the borders. If you let me know which element it'll be easier for me to check.

Glad to help. Hmm? A book? Sounds interesting. Time will be the tough part, but maybe I'll think about it over the long weekend.

phanio
05-22-2009, 10:11 AM
Think about the book - most that I have seen - especially the beginners guides always focus on tables - might be nice to see a beginners guide that just cuts to the chase.

I am not sure which element is causing the problem - it is very strange when the border ends then picks up again - it makes no rhyme or reason - I have tried moving them around - changing their order - putting padding on the outer div and margins on the inner div - floating left, right or none - clearing left, right or both - nothing seems to work. But, it does work in other browsers.

Also, I have a div that wraps my nav bar. I do this to put a little color behind the bar. In IE - it works great - autosizing to fit the nav bar inside of it. But, on all other browsers it does not work - show a little color sliver above the bar. I have tried all kinds of things and nothing seems to work. Can you give me a little direction.

vangogh
05-22-2009, 10:54 AM
If you're reading beginner guides on html then they would likely talk about tables. Also older books would have used tables. Still there should be some showing how to develop a site using css.

With the border thing I just meant if you could let me know which borders aren't showing. If you could narrow down for me which ones aren't showing it would help.

With the tab background what's happening is that everything inside the div is floated and so gets removed from the document flow. It's there there and the background is showing, but it's height is effectively 0 or close to 0.

If you just set the height on the div you'll see the background.

As a general pointer always develop first for Firefox and then check for IE instead of the other way around. IE usually requires more tweaks to get things right which then makes it harder to fix for Firefox. If you develop for FF first it's usually easier to then fix for IE.

phanio
05-22-2009, 01:08 PM
Thanks - I did set the height and it worked out fine - however, I was hoping to avoid setting height as I thought that was a part of positioning. But, it is working.

I can't tell you which border is not displaying as this is the weirdest thing. I have a wrapper div - then a header div - then a main content div - all that have borders on the sides. But, when displaying in IE - the border showes in the header - but also half way in the main content div then a big space - then shows up again at the bottom of the main content div. Thus, I don't know what div is causing the problem. Plus, when you scroll down the page, the border jumps around (up and down) like it is trying to scroll but then snaps back.

I also found out why my original site was not displaying properly with IE6 - It had to do with an unsupported css element that I was using. I have removed that element and it should work fine until I get the new design up and running.

Again, thanks for your help. I am going to start over with the design and see if I can't figure out what is going on.

vangogh
05-22-2009, 03:05 PM
Next time I open Windows on my machine I'll take a look in IE and see if I can figure out what's going on with the borders. I'm thinking that because of the floats some elements are appearing higher or lower than you think and one is sitting on top of the other hiding the border.

One thing you can do is try to validate the page (http://validator.w3.org/). Validate your html first and then your css. It can actually be a good way to learn since you see the errors and then have to fix them one at a time. I'm not sure your problems will be validation, but it's a good place to start. A lot of times if you fix the errors everything else starts falling into place.

You don't have to worry about some of the warnings. Many aren't an issue at all.

phanio
05-23-2009, 07:22 AM
I got it figured out - finally. No positioning and no tables. Thanks for the help. - http://businessmoneytoday.com/

If I could get a few reviews on the design - if someone is using IE6 - to see if it looks OK in that browser.

vangogh
05-24-2009, 01:59 PM
Looks like you removed the test page and pushed your changes to the main site so I changed your link above.

Looks good. I checked in Safari and Firefox. How do you feel now that you got rid of all the tables? I'd be interested to know if you experience a change in search traffic now that you've recoded.

phanio
05-25-2009, 09:35 AM
Not sure about traffic yet as I have many more pages to fixed and have put my SEO on the back burner (hard to promote something that is not complete).

I really like this way of designing.

Do have one more question - is there any time in which you use tables? I have several form pages - is it OK to use tables here?

vangogh
05-26-2009, 01:28 AM
Keep an eye on the traffic for down the road. See if you notice anything a month from now.

Tables are fine to use where appropriate. Generally that means when you're presenting tabular data. If your data calls for rows and columns then you should use a table. Where you want to stay away from tables is for layout. Technically I'd say that would include forms since you'd be using the table to layout the form. However a lot of people still use tables on forms. You don't need to, but I doubt anyone is going to get on your case for it.

The basic idea is that css is going to be cleaner and easier to maintain than using a table for layout. That goes for the layout of a form as well. People fall back on tables for layout because they think it's easier to use them. Personally I think css is still easier and faster, but if you're used to tables then you can probably layout the form quicker using tables.