Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 192
  • Last Modified:

HTML layout and display problems

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
jacobJL
Asked:
jacobJL
  • 8
  • 6
1 Solution
 
Hugh McCurdyCommented:
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
 
jacobJLAuthor Commented:
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
 
jacobJLAuthor Commented:
ok you should be able to access it @ http://tradingpostjn.com/
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Hugh McCurdyCommented:
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
 
Hugh McCurdyCommented:
What are you trying to do with the footer?  Put it inside the main area?
0
 
Hugh McCurdyCommented:
Try changing the sides to 165px width and see if that looks better in IE.
0
 
Hugh McCurdyCommented:
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
 
jacobJLAuthor Commented:
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
 
Hugh McCurdyCommented:
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
 
jacobJLAuthor Commented:
I don't know I can't seem to get margins to work properly.
0
 
Hugh McCurdyCommented:
OK, can you either send me a zip file of what you have now or update your website?
0
 
jacobJLAuthor Commented:
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
 
Hugh McCurdyCommented:
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
 
jacobJLAuthor Commented:
Thank you for your help. You experts Rock!!!
0

Featured Post

Independent Software Vendors: 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!

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now