HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Divs in IE and Firefox
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
Slimane



Joined: 21 Sep 2007
Posts: 3

PostPosted: Fri Sep 21, 2007 9:26 pm     Divs in IE and Firefox Reply with quote

Hello,

We have a classic problem concerning DIV positioning in Firefox.

We had a tool's UI designed with DIV elements inside a table. It looks OK in IE but completely out of whack in Firefox.

You can see it here and compare the rendering by the 2 browsers (the tool is in the blue table on the right):
http://www.sweetartsdesign.com.ws026.alentus.com/200WebSite/indexb.html

This is what we are trying to do - we need to keep the same table's total height but:
1) Make the 3rd area (name area) look better when minimized. There's a light blue gap at the bottom but we'd like only a 1 pixel thick line, as the ones that separate the other areas above (letter and design areas)
2) Have the whole tool's UI in Firefox match the one in IE

Do you have any tips?

Thanks!
Slimane



Joined: 21 Sep 2007
Posts: 3

PostPosted: Fri Sep 21, 2007 10:28 pm     Reply with quote

Corrected link is:

http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/indexb.html
sticks464



Joined: 31 Dec 2006
Posts: 1116

PostPosted: Sun Sep 23, 2007 7:04 am     Reply with quote

The first thing I see is no doctype declaration.
This is not a doctype

Quote:
<HTML xmlns="http://www.w3.org/1999/xhtml">


Try using

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


above the <head> starting tag.
Then use this content type

Quote:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


You are using far too many div's to accomplish your UI.
One div with other block element ie. h1, h2 for the main titles. Style all these elements with width, height, margins and padding. No need to do absolute positioning since it will reside inside a <td> anyway.
A lot of nesting here which makes it an absolute nightmare to troubleshoot. Try building it on a blank page and then copy and paste the code into the real page. Make sure to apply widths to all elements to fit inside the >td>.
Slimane



Joined: 21 Sep 2007
Posts: 3

PostPosted: Sun Sep 23, 2007 8:13 am     Reply with quote

Thanks, sticks464
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial