Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 
Go Back   Dev Articles Community Forums > Web Design > Web Development
Reload this Page

How to make this compatible to Firefox AND IE? (div/css)

Discuss How to make this compatible to Firefox AND IE? (div/css) in the Web Development forum on Dev Articles.
How to make this compatible to Firefox AND IE? (div/css) Web Development forum for discussing issues related to design and general web site layout. Find help for designing your web site to attract returning users.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
  #1  
Old January 4th, 2005, 10:39 AM
stormblast stormblast is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Germany
Posts: 3 stormblast User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to stormblast
Red face How to make this compatible to Firefox AND IE? (div/css)
Hi there, I just read some articles here on devarticles and fell in love with the div/css technique

Now I got the following problem
(see the attached Screenshots)

div1 is Firefox 1.0
div2 is IE 6.x

The css code looks like that:
PHP Code:
 body {
       margin: 10px;
       padding: 0px;
     }
 
     #leftcol {
       background: #FFFF33;
       margin-left: 80px;
       float: left;
       width: 30%;
       height: 250px;
       padding: 15px;
     }
 
     #rightcol {
       background: #33CC33;
       margin-right: 80px;
       float: right;
       width: 30%;
       height: 250px;
       padding: 15px;
     } 
The HTML Part:

PHP Code:
<div id="leftcol">
     <b>Neuer Kunde</b><br>
     Falls Sie noch nicht in unserem System registriert sind klicken Sie bitte auf Neuer Kunde<br>
     <form action="country.php" Method="POST">
     <input type="Submit" value="Neuer Kunde">
     <input type="hidden" value="'.$baq.'" name="back">
     <input type="hidden" value="'.$get_string.'" name="get_string">
     <input type="hidden" value="'.$text.'" name="posttxt"></form></div>
     
     <div id="rightcol">
     <b>Bestehender Kunde</b><br>
     Bitte loggen Sie sich hier mit Ihrer E-Mail Adresse und Ihrem Passwort ein<br>
     <form action="kdinfo.php" Method="POST">
     <table border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td width="15%">E-Mail:</td>
         <td><input type="text" name="Rmail"></td>
       </tr>
       <tr>
         <td width="15%">Passwort:</td>
         <td><input type="password" name="Rpass"></td>
       </tr>
     </table>
     
     <a href=recover.php>Passwort vergessen?</a><br><br>
    <input type="Submit" value="Einloggen"></form>
    
    </div> 


Now how can I manage it to look simliar on IE and Firefox? I'd appreciate any help!

Thanks for your time.
Attached Images
File Type: png div1.png (8.9 KB, 1268 views)
File Type: png div2.png (8.9 KB, 1210 views)
Reply With Quote
  #2  
Old January 5th, 2005, 08:05 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
  
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,890 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8
Which one is the correct one?
Which one did you intend it to look like?
Reply With Quote
  #3  
Old January 5th, 2005, 08:12 AM
stormblast stormblast is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Germany
Posts: 3 stormblast User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to stormblast
It should look on both browsers like on div2.png (IE). I know how to do it so it fits on Firefox but then IE is screwed..
Reply With Quote
  #4  
Old January 5th, 2005, 08:16 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
  
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,890 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8
Wait, i pasted your code into its own file on my hard drive...
both browsers look the same...

Refer to my screen shot and the exact (unmanipulated) code I used...

Is there something you did to the code you posted after you made your screen shots?
Attached Images
File Type: gif browsers.gif (86.1 KB, 811 views)
Attached Files
File Type: txt page.txt (1.5 KB, 466 views)
Reply With Quote
  #5  
Old January 5th, 2005, 08:21 AM
stormblast stormblast is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: Germany
Posts: 3 stormblast User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to stormblast
No it's not the same
Check the distance between those 2 boxes on IE and then on Firefox.

You'll notice that the distance on Firefox is much bigger than on IE..
Reply With Quote
  #6  
Old January 6th, 2005, 12:43 AM
pocketsized pocketsized is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: May 2004
Location: Brunei
Posts: 26 pocketsized User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
(I'm a bit pressed for time so I'll make this short and sweet)

What doctype are you using? And which version of IE? I tested using the STRICT doctype and IE 6.0.

I see the code uses margins on floats. While I can't remember off the top of my head, I think margins work differently on floats than on other elements. You might wanna look that up. It may just be that IE isn't interpreting the CSS properly, and I vaguely remember an article on positioniseverything.net that made references to and IE bug where floats that were positioned twice as fas as the coder intended. This may be your problem.

I removed the margin-left from the left float and the marin-right from the right float and the layout looks the same on both browsers. I have a feeling that the issue is the IE bug documented by PIE.net. Check the site and read up the article
Reply With Quote
Reply

Viewing: Dev Articles Community Forums > Web Design > Web Development > How to make this compatible to Firefox AND IE? (div/css)

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway.