Solved

HTML layout and display problems

Posted on 2012-03-10
14
187 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Text too large in Chrome 17 82
Html date format 9 28
why is my slideshow so small on this wordpress site? 7 39
CSS - display the same fonts throughout website. 4 23
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

738 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