Solved

HTML layout and display problems

Posted on 2012-03-10
14
182 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

920 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

20 Experts available now in Live!

Get 1:1 Help Now