Solved

HTML layout and display problems

Posted on 2012-03-10
14
188 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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…

623 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