...

View Full Version : google vs ie



askjacq
11-15-2011, 02:52 AM
please look at www.txacom.net in Google and then IE. Google is perfect. IE puts a huge space before the text in the second column. What is making it do that? Thanks!!

Sammy12
11-15-2011, 03:00 AM
different browsers render tags with different amount of default margins/paddings and font



* { margin: 0; padding: 0; }
body { font: 13px Arial, Helvetica, sans-serif; line-height: 1.28; }


the first part will set all tags with no margins and paddings
the second part will make your font the same across all browsers



p { font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height:
1.5 em;margin-left:24px; margin-right:12px; margin-top:12px; margin-bottom:12px; }


all I can really say is try to add this code to your css and see what happens. I think you should consider rewriting the site with cross browser compatibility in mind

askjacq
11-15-2011, 03:05 AM
I would love to design it for cross-over browser support. I just don't know what the issue is so I can solve it. Here is my css code:

body { font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height:
1.5 em; margin-left:24; margin-right:12; margin-top:12; margin-bottom:12 }

p { font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height:
1.5 em;margin-left:24; margin-right:12; margin-top:12; margin-bottom:12 }

h1 { font-family: Trebuchet MS; font-size: 1.5 em; color: #AA0F09; font-weight: bold;
line-height: 1 em; margin-left:24; margin-right:12; margin-top:12; margin-bottom:12 }

a:link { color: #000080 }

a:hover { color: #AA0F09}

a:visited { color: #AA0F09}

li { list-style-type: square; font-family: Trebuchet MS; font-size: .8 em; color: #000000; line-height:
1.5 em; margin-left:24; margin-right:12; margin-top:0; margin-bottom:0 }

Sammy12
11-15-2011, 03:07 AM
if you have google chrome installed, right click on the website, then click "inspect element". everything with a yellow ! sign (and crossed out) are things that aren't rendered because they aren't correct.

in this instance, you are missing px at the end of 12. (12px)
1.5em <-- no space

http://i1114.photobucket.com/albums/k535/auroralight1/untitled-107.png

askjacq
11-15-2011, 03:15 AM
I can fix that. Why are the margins crossed out?

askjacq
11-15-2011, 03:19 AM
OK - figured out the margins - it was the px. But it still leaves the huge gap in IE.

askjacq
11-15-2011, 03:24 AM
I put the px after the 12 and 24 and removed the space before em, but google still crosses those lines out. By the way, Sammy, never knew about the inspect element - thanks!!

Sammy12
11-15-2011, 03:26 AM
I think I'm just going to redo this page.

askjacq
11-15-2011, 03:30 AM
That would be cool to see!!

cineweekly.com
11-15-2011, 04:09 AM
Elements are crossed out because they're more than likely overrode by another class or id's elements.

askjacq
11-15-2011, 04:11 AM
Anyone know anyone who can teach me css in Dreamweaver. I have a basic, basic understanding, but as you can see, I need a lot of help.

Sammy12
11-15-2011, 05:27 AM
2 hours spent, your welcome
used float: left on side panel in case absolute failed

unzip the file, make sure you're using either an apache server or website server, or it won't show up right

download link:
http://www.mediafire.com/?0z5wxmy9ea7byuw

live view:
http://testingserver135.pcriot.com/txacom/

google chrome
http://i1114.photobucket.com/albums/k535/auroralight1/untitled-108.png

firefox
http://i1114.photobucket.com/albums/k535/auroralight1/untitled-109.png

opera
http://i1114.photobucket.com/albums/k535/auroralight1/untitled-110.png

ie7
http://i1114.photobucket.com/albums/k535/auroralight1/untitled-111.png

teedoff
11-15-2011, 02:22 PM
I would love to design it for cross-over browser support. I just don't know what the issue is so I can solve it.

One thing that hasn't been mentioned is the fact that you NEED a valid doctype if you ever expect cross browser compliance. Presently, you dont have one.

The validator (http://validator.w3.org)will show you this and your other coding errors. Clean code is another good step to rendering your page correctly in all browsers.

askjacq
11-15-2011, 11:06 PM
So what's a valid doctype?

teedoff
11-15-2011, 11:52 PM
So what's a valid doctype?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

askjacq
11-16-2011, 02:56 PM
So we still haven't addressed my original question: why does it look different in IE vs Google?

Kor
11-16-2011, 03:30 PM
So we still haven't addressed my original question: why does it look different in IE vs Google?
So, you have not read the posts attentively. Let's glean some of the previous explanations:

"different browsers render tags with different amount of default margins/paddings and font"

"One thing that hasn't been mentioned is the fact that you NEED a valid doctype if you ever expect cross browser compliance. Presently, you dont have one."

When things look different in different browsers:

1. You have not used a Doctype
2. Your code was not standard
3. There are cross-browsers incompatibilities, bugs, incomplete or lack of implementation in different browsers.

To reach the 3rd reason, you should first make sure you have resolved the first two.

askjacq
12-12-2011, 04:51 AM
I added the following doctype to www.txacom.net:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


I am still getting major differences in how IE sees the page vs Google. can anyone tell me what in the code is making the extra space in the one column?

carlosdepero
12-12-2011, 07:38 AM
To that end, Google has designed an almost completely new Web browser. In fact, other than the core rendering engine -- which is based on the open-source WebKit standard of Safari fame -- everything in Google Chrome constitutes a rethinking of how you engineer a browser application. For example, with the current versions of Mozilla Firefox and Internet Explorer, individual Web page tabs are hosted in a single process -- a model that is efficient (in terms of memory and resource consumption) but also prone to catastrophic failures: A single crashed tab can easily take down the entire browser application.

Chrome seeks to eliminate this problem by isolating each tab within its own application process and then leveraging the built in memory protection capabilities of modern, preemptively multitasking operating systems to keep code and data in a failing tab from stomping on other processes. So now, when that buggy Flash applet on your favorite humor site goes belly up, it won't necessarily take down the entire browser -- the processes running in other tabs will keep chugging along.

This is a big deal for Google, which is banking on wider adoption of its hosted application offerings and battling the perception that browsers are unreliable, especially when you start running multiple Web applications in a tabbed format. Nobody wants to trust their line-of-business applications to an unstable environment, so Google hopes that Chrome will provide the kind of robustness that can assuage customers' fears


Moderator says: no links are allowed, if they are not related with the post (*)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum