Help!  IE vs Chrome issues!
Posted: 17 April 2010 07:24 AM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2010-04-17

Hello all,

I’m new to the whole css/html scene but I’m trying to make a website just for kicks because well.. I think its fun.  So I decided I’d make a bunch of templates and maybe if I get good enough I can make sites for small businesses.

Anyway.  Whilst showing my sister my latest creation, she let me in on a secret… the site rendered horribly in IE!  I made the mistake of only checking it in Chrome because well.. that’s just what I use.

So, here are two screenshots of the site in both Chrome and IE…

http://www.sonoraoutdooradventures.com/template/chrome.jpg
http://www.sonoraoutdooradventures.com/template/IE.jpg

and here is a link to its *temporary* location: http://www.sonoraoutdooradventures.com/template/index.html

and here’s the code… I know its long but bear with me!

<html>
<
head>
<
title>WWWdotsTemplate</title>
<
style type="text/css">

body 
{ margin
-top5%;
  
margin-bottom:5%;
  
margin-left5%;
  
margin-right5%;
  
padding-left0;
  
padding-right0;
  
background-image:url('snippets/gradient.jpg');
  
background-repeat:repeat-x;
  
}

#box{
 
height:100%;
 
width:100%;
 
margin-left:auto;
 
margin-right:auto;
 
background-color:#800d4a;
}

#header {
  
marginauto;
  
padding0px;
  
background-color:#e73a95;
}
#nav {
  
float:left;
  
margin:auto;
  
width9em;
}
#content {
  
margin-top:1em;
  
margin-left:9em;
  
margin-right:5em;
  
height:65%;
  
padding:1px;
  
background-image:url('snippets/contentgradient.jpg');
  
background-repeat:repeat-x;
}
img
.center {
    display
block;
    
margin-leftauto;
    
margin-rightauto;
}

h1
h2h3h4h5h6
{
    color
:#870047;
    
font-family:"Comic Sans MS"cursivesans-serif;
    
text-align:center;
}

p
.content
{
   color
:black;
   
font-family:"Comic Sans MS"cursivesans-serif;
   
text-align:center;
}

</style>
</
head>

<
body>
<
div id="box">
<
div id="header">

<
img class="center" src="snippets/banner.png" height="20%" width="100%"/>

</
div>

<
div id="nav">

<
a href="#home"><img class="center" src="snippets/home.png" /></a>
<
a href="#home"><img class="center" src="snippets/stylists.png" /></a>
<
a href="#home"><img class="center" src="snippets/hotcuts.png" /></a>
<
a href="#home"><img class="center" src="snippets/contactus.png" /></a>
<
a href="#home"><img class="center" src="snippets/dailydeals.png" /></a>

</
div>


<
div id="content">
<
h2> ~ This is a test template ~ </h2>
<
class="content"This site is another basic layout that has no troublesome scripts just HTML/CSS! </p>
<
h3This could be your site! </h3>
<
img class="center" src="snippets/lady.png" />
<
h6WWWdotsTemplate created by Katherine Johnson © 2010 <h6>
</
div>

</
div>
</
body>
</
html

What can I do!  I love the way it looks in chrome but I know most people use IE.  :-(

Thanks in advance!

—Mynxie

Profile
 
 
Posted: 21 January 2011 03:45 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  7
Joined  2010-11-26

Hey Mynxie,

Did you find out a way to fix this?  I’m really stuck with working out how to create fixes for older versions of IE… is there a straight forward way of working out what works and what doesn’t?

Ideally I mean like a debugger tool that can tell you what’s up, or something I can always put in every site I make that cancels out these cross-browser deviances!

Any help would be appreciated!

—Will

Profile
 
 
Posted: 21 January 2011 03:50 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  7
Joined  2010-11-26

Hey Mynxie,

Did you find out a way to fix this?  I’m really stuck with working out how to create fixes for older versions of IE… is there a straight forward way of working out what works and what doesn’t?

Ideally I mean like a debugger tool that can tell you what’s up, or something I can always put in every site I make that cancels out these cross-browser deviances!

Any help would be appreciated!

Will Quick

Profile
 
 
Posted: 30 January 2011 12:35 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  2
Joined  2011-01-26

As “nubie” suggested clearing your browser history should solve the problem.


____________________________________

RC Toys

Profile
 
 
Posted: 30 January 2011 03:16 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  1
Joined  2011-01-30

What do you like better, I cant seem to get a feel on any of them. So i would just like to know some opinions, pros cons, things like that.
_________________
Tour Guides or Private Tour Guides

Profile
 
 
Posted: 07 February 2011 08:47 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  8
Joined  2010-11-23

That’s rough! I really really wish IE would get lost in the internet. It’s the most frustrating browser ever. I’m going back to Netscape. ;) It would probably easier to design in! Are there any 800 numbers to call and ask for help? I know online is easier, but it might be good to try a real person connected to a designer or IT department that could get you steered in the right direction.

Profile
 
 
Posted: 08 March 2011 09:34 AM   [ Ignore ]   [ # 6 ]
Sr. Member
RankRankRankRank
Total Posts:  139
Joined  2010-04-23

The links are not valid.
_____________________________
Sudoku - Flash Game - Flash Game
Flash Game - xnxx - Flash Game

Profile
 
 
Posted: 08 March 2011 11:25 AM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  1
Joined  2011-03-06

I guess it doesn’t matter anymore since the sites are not live.

Try this if its a dynamic menu problem

ul#top_menu li { float: left; }
ul#top_menu ul li a { height: 1%; } 
Profile
 
 
Posted: 17 March 2011 07:35 AM   [ Ignore ]   [ # 8 ]
Newbie
Rank
Total Posts:  1
Joined  2011-03-17

very helpful.

Profile
 
 
Posted: 07 April 2011 12:57 AM   [ Ignore ]   [ # 9 ]
Newbie
Avatar
Rank
Total Posts:  5
Joined  2010-09-17

I find it best to design it for IE first, then make some tweaks for rendering in Firefox and Chrome.  If I ignore IE from the start and design looking at it only in Firefox, I have to make tons of fixes for Internet Explorer.

Profile
 
 
Posted: 30 April 2011 05:47 AM   [ Ignore ]   [ # 10 ]
Newbie
Rank
Total Posts:  9
Joined  2011-02-18

Try to solve with IE first.

Profile
 
 
Posted: 06 June 2011 07:52 PM   [ Ignore ]   [ # 11 ]
Sr. Member
RankRankRankRank
Total Posts:  139
Joined  2010-04-23

With IE you should always use the DOCTYPE it makes it easier for the cross browser work such as:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

_____________________________
Running - Running Log
5k - 10k - Half Marathon - Marathon

Profile
 
 
   
 
 
‹‹ Help !!!!!      resizing ››