Solved

HTML layout and display problems

Posted on 2012-03-10
14
181 Views
Last Modified: 2012-03-14
Hi experts and thanks in advance for you help.
I am trying to build a professional small business website. I have built websites before but none that I gotten paid for. So bottom line is I need a good site layout that works cross platforms. I like using css and divs to create the layout, and I am using dreamweaver to code. My issue is the screen looks different in IE and Firefox. In Firefox everything looks good except the footer. In IE the main content area is off. I am attaching my files, please have a look at the code and let me know what I am doing wrong.

I would also like it if you could tell me if my layout is a good design or if I should go with a different layout. Thank you.
Tradingpost.zip
0
Comment
Question by:jacobJL
  • 8
  • 6
14 Comments
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 37705598
This would be easier to look at if you published it somewhere.

There are several web hosts that allow you to publish simple pages for free.  I use www.tekcities.com

My tekcities sandbox is
http://hugh.tekcities.com/hugh/index.php
0
 

Author Comment

by:jacobJL
ID: 37705636
I didn't want to publish my site until I had some major content. I am registered with Ipage but haven't figured out how to publish yet and if it's simple to stop publishing. I will see what I can do.
0
 

Author Comment

by:jacobJL
ID: 37705673
ok you should be able to access it @ http://tradingpostjn.com/
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 37705703
For starters, I suggest you don't publish your e-mail address.  Spam harvesters will grab it and you'll start getting lots of spam.

For now, I suggest you remove it.  Later, I'd create a contact form and have a CGI process the form and send you e-mail that way.  A CGI can be written in C/C++, PHP, Perl and Python, to mention a few.
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 37705706
What are you trying to do with the footer?  Put it inside the main area?
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 37705713
Try changing the sides to 165px width and see if that looks better in IE.
0
 
LVL 13

Accepted Solution

by:
Hugh McCurdy earned 500 total points
ID: 37705721
You have more </div>'s than <divs> in your file.

I suggest you use the following validator

http://validator.w3.org/

To view the errors on your page
http://validator.w3.org/check?uri=http%3A%2F%2Ftradingpostjn.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Also, you should have an alt tag for your image.
http://www.w3schools.com/tags/att_img_alt.asp
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:jacobJL
ID: 37705792
Ok so I found the lingering </div> which fixed the footer problem. Deleted the email, good idea thanks. I changed the left and right sidebar width to 165 which looks good in IE but now its messed up in firefox. If I have the left-sidebar floating left and right sidebar floating right, isn't there a way to make the main content expand automatically to fit in between the two?

Also do you notice a delay in loading the image? Could that because its a png. its 731kb which doesn't seem that big
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 37705845
I didn't see a delay.

Take a look at my CSS.  It works in FF and other browsers.

http://hugh.tekcities.com/hugh/hugh.css

I don't set a width for the center.  Instead, I set margins.
0
 

Author Comment

by:jacobJL
ID: 37705909
I don't know I can't seem to get margins to work properly.
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 37705987
OK, can you either send me a zip file of what you have now or update your website?
0
 

Author Comment

by:jacobJL
ID: 37706025
It's updated however, I pretty much gave up on the way I had it layed out and instead used a Dreamweaver template that worked pretty well. You can still have a look but I think I am good for now. Appreciate your help.
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 37706034
That works.

I suggest you put some actual text in the alt tag such as

<a href="#"><img src="images/tradingpostwithbulletWithoutshadow.png" alt="Trading Post Logo" width="962" height="208" id="Insert_logo" style="background: #C6D580; display:block;" /></a>

I suggest you also put text in your existing title tag
<title>Trading Post : Home Page</title>
0
 

Author Closing Comment

by:jacobJL
ID: 37723155
Thank you for your help. You experts Rock!!!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now