boutte
Jan 8 2007, 08:37 PM
| | First let me say hi to the group, this my first post and I hope this post isn't too repetitive as I'm sure a lot of people have this problem. I recently decided to get back into web design after a long lay off. Since I haven't built a site in six tears I'm not well versed in CSS but I figured I'd build my first site as I learned how to use it. Initially things looked pretty good in all three browsers so I quit checking in Firefox and Netscape. The site is still not finished but I posted what I have to a free host and when I checked it in IE it looks good but (you guessed it) it's totally screwed up in every other browser It just doesn't line up right. I used absolute positions but there's stuff all over the place.
Also, what doctype should I be using? Here's the link http://boutte.awardspace.com.
By the way, I know it's weird for a novice to be building a web design guide type of site but as I learn I expect the site to grow with me |
Reply
<?me?>
Jan 8 2007, 08:48 PM
Did you try using the CSS positioning yet? I looked at the source code for your site and I didn't see any. You can position elements like this (inside a style tag or external style sheet): CODE div.left { position:absolute; left:100px; }
This will position the div element with the class '"left" 100px to the left of it's parent tag (normally the body). You can also use 'top', 'bottom' and 'right' to position. That should work in all modern browsers, I think. I would be surprised if you haven't tryed it yet but good luck to you on learning css and I hope this was some help.
Reply
boutte
Jan 8 2007, 09:01 PM
QUOTE(<?me?> @ Jan 8 2007, 02:48 PM)  Did you try using the CSS positioning yet? I looked at the source code for your site and I didn't see any. You can position elements like this (inside a style tag or external style sheet): div.left { position:absolute; left:100px; } This will position the div element with the class '"left" 100px to the left of it's parent tag (normally the body). You can also use 'top', 'bottom' and 'right' to position. That should work in all modern browsers, I think. I would be surprised if you haven't tryed it yet but good luck to you on learning css and I hope this was some help.
Yeah I have three "boxes" defined in the header and I used this CODE <span style="position:absolute;left:20px; top: 150px;" class="box"> <span style="position:absolute;left:170px; top: 150px; padding:6;" class="box2"> <span style="position:absolute;left:770px; top: 150px;" class="box">
to align them. Works great in IE and the first box goes right where it's supposed to in Firefox and Netscape. The other two boxes don't.
Reply
jlhaslip
Jan 8 2007, 09:09 PM
Two things: 1.) try to avoid using position:absolute because of the differences between the Browsers and the problems that result from its use. Depend on the "flow" of the page elements instead of specific positioning. Use Margins and padding to space and seperate div's 2.) Design using a more compliant browser than IE and then hack the css to suit rather than designing the page in IE and expecting to hack the compliant Browsers. Compliant Browsers are more difficult to hack because they actually get it right the first time. Opera and Firefox are more compliant than IE, so use them to design your page in. A common approach to hacking IE is using the conditional statements to alter the css or to use a different css file for the IE css coding. Good luck with the page.
Reply
boutte
Jan 8 2007, 09:19 PM
QUOTE(jlhaslip @ Jan 8 2007, 03:09 PM)  Two things:
1.) try to avoid using position:absolute because of the differences between the Browsers and the problems that result from its use. Depend on the "flow" of the page elements instead of specific positioning. Use Margins and padding to space and seperate div's
2.) Design using a more compliant browser than IE and then hack the css to suit rather than designing the page in IE and expecting to hack the compliant Browsers. Compliant Browsers are more difficult to hack because they actually get it right the first time. Opera and Firefox are more compliant than IE, so use them to design your page in. A common approach to hacking IE is using the conditional statements to alter the css or to use a different css file for the IE css coding.
Good luck with the page.
Thanks So I guess I should use Firefox as my internal broser. What errors did you see that would cause the problems I'm having in lining up the elements in Firefox? It's eems like an absolute position of <span style="position:absolute;left:170px; top: 150px; padding:6;" class="box2"> would line that box up 170 pixels from the lefy and 150 pixels from the top regardless of which browser you view it in, no?
Reply
jlhaslip
Jan 8 2007, 09:27 PM
Absolute:positioning is tricky at best. The problem comes from the origin which the browsers define as (0,0), some times it is the "window" and other times it is the "parent element", so as I mentioned, try to use the document flow, floats, margins and paddings instead of position:absolute.
Reply
boutte
Jan 8 2007, 09:53 PM
QUOTE(jlhaslip @ Jan 8 2007, 03:27 PM)  The problem comes from the origin which the browsers define as (0,0), some times it is the "window" and other times it is the "parent element",
Okay that makes sense. I guess I have some work to do. Thanks for the help.
Reply
Similar Topics
Keywords : browser compatibility problems netscape firefox- Japanese Browser Called Sleipnir
- (2)
- Firefox Portable
- (3)
so I recently downloaded firefox portable for my flash drive. I have to say that I was never a fan
of firefox... I run windows, but use safari and I really like it, one of the major reasons I didnt
like firefox was because of the way it displayed my website... It basically destroyed
it!!! anyway, recently I was looking for a portable browser for my flash drive.... and
all I could find for free was firefox! so i got it and scepticaly ran it for the first time....
by the way, at first it didnt come up, so i forgot about and opened safari, and like 5 minu...
Firefox Or Internet Explorer
- that is the question... (295)
I see as firefox as my main choice but its really up to you on what you choose: Firefox is an
open-source (Wired mag) Internet browser, thought up by a 18 year old (completed when 19) after many
frustrations with Internet explorer. It has a built in pop up blocker that has never once fail me,
and is 100% skinnable. It includes TABS, which is a fature that lets you see more than one page in
one window. Because of its new scent, noone has bagan to look for a way to deliver viruses thrrough
the browser. It has promoted its service by Spreadfirefox.com, which gives of webba...
What browser do you use?
- (681)
I use IE 6, enhanced from Win XP SP2. I want to see what other people use for browsers, and maybe
start a discussion. This place needs more activity... /wink.gif" style="vertical-align:middle"
emoid=";)" border="0" alt="wink.gif" />...
Mozilla Firefox Poll
- Give your view about the FireFox browser (75)
Hey guys, Lemme know what you think abou the Mozilla Firefox browser. I personally think it out
runs Microsoft Internet Explorer mainly cos of the convenience of having all the windows in one main
window, plus enhanced security features. What do you think? Cheers! Yasir /smile.gif'
border='0' style='vertical-align:middle' alt='smile.gif' /> ...
Making My Own Browser
- Uhm...need a name (6)
I am currently developing my own Web Browser and I need a name for it /biggrin.gif"
style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" /> So if you got any good
ideas please do post them /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0"
alt="biggrin.gif" />...
Is Mozilla The Best Browser?
- (57)
Hi guys, Can anyone tell me what is the main deference between IE and Mozilla Firefox ? I have been
using IE (version 6.0) for one year but from now on I have decided to use Firefox. I just want to
know as to what Mozilla can do which Internet Explorer can not. Thanks! ...
Firefox 3 Sucks - Time For Another Browser
- (48)
No seriously, I've been using Firefox since 0.x releases. I loved it. Every release, despite
having no huge features, was a great update. Version 3, however, totally messes everything up. Its
default interface is ugly. And no Home button, really ??? (ps. I kno i can drag it back from the
bookmarks toolbar but still, its stupid). The address bar search thing. I liked the concept, but I
am so used to the old way, this actually distracts me, I don't want to search my history
everytime I type a new address. Plus the slide out is huge now making the whole thing feel t...
Firefox Hits The 50 Million Download Mark
- New Landmark ;) (36)
Hi guys, Our beloved FireFox Browser hit the 50 million -th download mark today. We were all
present at their irc room on irc.mozilla.org channel #spreadfirefox and had a gala party with a
whole bunch of people from around the world - taking part in the countdown. I managed to catch a
snapshot of their live counter at 50 million and 1 downloads - here's the Snapshot: This
was by far one of the most exciting online events I took part in recently... 50 million Cheers to
FireFox /wink.gif' border='0' style='vertical-align:middle' alt='wink.gif' /> ...
Microsoft Firefox
- (32)
Microsoft Firefox http://www.msfirefox.com/ this is a must check for all users, funny
/smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />...
Ie And Firefox Layout Differences
- (10)
I have had a go at making a website using CSS to dictate the layout (no tables used) and it works
quite nicely in firefox but when i open it in IE it completely mangles the whole layout. Can
someone tell me some techniques to prevent this and maybe point me to some helpful pages. Thanks....
Test Your Browser For Security
- take the browser security test (11)
test your browser for security holes: http://bcheck.scanit.be/bcheck/ This checks for the most
commonly occurring security vulnerabilities in the major browsers.In total there are some 40 tests
and may take a long time to finish. I have run this test on 4 browsers: 1)IE 7 : 0 vulnerabilities
(but the browser goes crazy, opening several windows and applications) 2)IE 6 : 1 medium risk (the
browser goes crazy like IE7) 3)Firefox 2.0.0.3: 1 medium risk (i think some plugin might have caused
this as some others have had different results) 4)Opera 9.2: 0 vulnerabilities ...
Pogo
- AT&T browser (1)
hey guess what AT&T now has a new browser coming out "Pogo" cute but not very new. but going past
the name the browser itself looks really i havent used but from webware and stuff, it's very
visual based like it's bookmark feature is visual base it's history is visual based, and
lots of other features.the idea seemeds cool to me but it's always when they try to do stuff
like that's when the stuff get realy lagging so it could be great if they getting working. fore
more info: http://www.pogobrowser.com/demo.html http://www.webware.com/8301-1_109-992...
Toolbars
- why many websites are begging you to install their browser toolbar, wh (2)
some websites are asking you to download their toolbar from a useful one like google toolbar to
harmful one like websearch toolbar and some provide service only if their toolbar is installed
(example: mega upload). QUOTE whats browser toolbar? Third-party toolbars for browsers are
best known for adding functionality and ease-of-use options to the end user. While the browser
itself handles basic browsing navigation (Back, Stop, Reload, etc) using its own toolbars, external
toolbars often add additional functionality to browsers (additional search fields, form-fil...
Firefox "download Day"
- (25)
As many of you know Firefox will be attempting to set a world record on "Download Day" - Date to be
announced. As most people on this forum have taste and use firefox I think it would be great that on
the day we could have a post where whenever someone downloads can post in, then we can take a
screenshot of it and send it to mozilla. It could be in the guest forum or a members forum but
obviously nothing with post count, I just want to know what the admins/mods fink of this idea? for
more information and I suggest you read this go to ...
The Fastest Browser
- nice study has been done (81)
There are battles between different browsers for a long time now and it all began when netscape and
microsoft started the war;) First is now almost forgotten and the second one survived and is today
fighting mostly with Mozilla, Firefox and Opera. Each of those has many fans which will say that
his browser is the best! But WHICH IS REALLY THE BEST??? On the page HowToCreate they tried
to answer that question as they were comparing the most popular browsers for Linux (Firefox,
Mozilla, Konqeror, Opera, Epiphany), Mac OS X (Safari, Opera, OmniWeb, IE, iCab, Fir...
Firefox Feel
- (6)
If you use FireFox as compared to IE, You'll see just in the way pages are viewed the feel and
look of them are smoother the IE's rough view of sites. You may not know what I mean, but think
of how smooth firefox is compared to other browsers. safari is smooth, but still rough, and Opera
is a little rough like IE too, I think FireFox is the most user friendly and smoothest....
Had You Tried Firefox 3 Beta 5?
- What can you say? (12)
i recently stumbled on lifehacker's guide to firefox 3 beta 5: Lifehacker's Guide to
FF3BETA5 i am courageous enough to ditch my firefox 2 installation and installed the latest beta
as my default browser.. here is the guide to remove firefox 2 completely so that you can start a
fresh installation of the beta 5 : Uninstalling_Firefox now that i have completely installed the
beta - i am deeply satisfied by the new features.. they said that the official release of firefox 3
is on june 2008 but i just can't wait to experience the new features this browser h...
Firefox 2
- Whos has it and what do you think? (48)
I never really liked Firefox just because i always thought it was just as good as my now 2nd
favorite browser, Opera. It had all the same capabilities and actually Opera was the first to have
tabbed browsing and is the safest of all of them. When I heard about the new Firefox i wanted to try
it out considering i needed it anyways to test out my websites. I got the iFox Smooth skin also to
test out the skins. I have to say i love it. The spell check it awesome. I would have downloaded
Firefox just for the spell check. What are your favorite new features? Have you even dow...
Ietester Browser
- (1)
Out of a fluke I found this software on a tutorial website, and basically your designing for IE by
opening several different versions of IE is over. There was a IE software that haslip mention,
however, I didn't like the fact it would cuase the browsers to crash. So I found bump into this
by accident, and the rest is history, interestingly enough if oyu have Office 2007 installed, you
have the option to chance skins based on what Office 2007 has. As for what versions this program
supprts is Internet Explorer 5.5, 6, 7, and even 8b1. It aslo has an update button so...
Slow Mystery In Firefox Over Linux
- Can I speed up my browser when I have a youtube video? (1)
Sometimes, when I get one page then have a youtube video, my Firefox over Linux (PCLINUXOS) slow
down. Sometimes it freeze. Anybody have the same situation/problem? How can I fix? Any special
config for solve my problem? ...
500 Million Firefox Downloads
- (7)
Yesterday was the biggest milestone in Firefox history they just hit 500 Million downloads of their
most famous software the Firefox web browser. All I have is WOW! and such a short time to of
course when you create a program that is more advance, more secured, and just plain out more better
then everyone else's, that number isn't that surprising because of the popularity it has
receive in under 4 years of being out there. Of course with Firefox 3 on it's way out I would
be surprised if it hits 1 billion in less the time though. SOURCE ...
Firefox 3.0 Alpha6 Rc2 And Alpha7 Pre
- testing alpha versions of Firefox (5)
Hello Trap17 members, especially Firefox lovers and advocators! /smile.gif"
style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /> While testing the buoyancy
of my personal toy (my boat) I ran into the land called, Canada. There, I had to scavenge for some
ration to keep up with my day to day activities. Surprisingly, the land called Canada was hospitable
and plentiful in many diverse and exotic things. So I brought back some to share with my Trap17
community. Ha ha... Now that you've read the excitement in my words, I'd like to present
few...
Firefox Is ? To Ie's Msie
- (4)
What is firefox's abbreviation? like how Internet Explorer is MSIE; I can't find it anywhere
and I can get it from using PHP to try and find it....
Firefox Hit With Spoofing Bug
- (3)
QUOTE A serious flaw in how Firefox handles log-ons could be used by identity thieves to dupe
users into disclosing passwords, a noted security researcher said Wednesday. Aviv Raff, an Israeli
researcher best known for ferreting out browser flaws, revealed the Firefox spoofing vulnerability
on his personal blog, and posted a demonstration video there. He did not go public with any
proof-of-concept code or working exploit, however. According to Raff, Firefox 2.0.0.11 -- Mozilla
Corp.'s most current version -- fails to sanitize single quotation marks and spaces i...
Browser Wars Episode 2007: Break Down Of Broswer Usage
- (0)
Now that 2007 is almost over with news of Netscape's demise in just two months, and the major
players in the browser wars are set in stong; Microsoft's Internet Explorer 6 & 7, Firefox 1.x.x
& 2.x.x and Beta 2 version of Firefox 3, Opera 9.x, and Safari 3.x. Lets just see where the % point
are for the major players. Growth Chart So as you can tell both browsers IE7 and FF2 started
roughly the same, 24% for IE7 and 25% for Firefox 2, but interestingly enough they ended the year
roughly the same but with firefox winning by 1% at 37% while IE takes a nice 36...
Bookmark Improvements New To Firefox 3
- (1)
A new version of the Firefox browser, now available for testing mainly by developers, offers
improvements on finding frequently visited Web sites and tools for running Web applications without
a live Internet connection. The Beta 1 version of Firefox 3 released this week still has problems,
including the inability to run newer Web-mail programs from Yahoo Inc. and Microsoft Corp., and a
final version for consumers isn't expected for several months. But it offers a window on
what's to come. Many of its new features concern bookmarks, an area typically slow to ...
Limit Browser Download Speeds
- looking for a plugin to limit my download speed (8)
Hi Guys, I'm trying to test a site for a client who doesn't have broadband. She has told me
that it's taking too long to download. I'm currently on broadband 2 so for me the page
loads in under a couple of seconds. Is there a way I can emulate 56k speeds on my browser so that I
can see how long would take to download. Cheers....
Firefox 3.0 Alpha 8 & Firefox Campus Edition
- (4)
Well as we get closer and closer the release of Firefox 3.0, mozilla comes out with Alpha 8. In
this update it is security rich this time as they bring in anti-malware warnings and protection
against rogue extension updates. They also beefed up the security to the extension auto updates to
help prevent people from redirecting you to malicious sites because of the way the auto update
works. This time they have set it up in a way that it checks the url of the installation manifest
and makes sure its the correct one or it doesn't get updated. QUOTE "Firefox aut...
Possible Problems With Internet Explorer Team?
- (1)
I just saw this article today and I find it very interesting and also wondering whats going on as
well. ITs been awhile since I first heard about Internet Explorer 8 is coming out, can't find
that post, but from what this blog is saying IE should already have a beta version of this explorer
out, but so far nothing has come out for that nor bug reporting for internet explorer 7 as well.
However, I see one thing about this though and that is everyone knows internet explorer is the most
hacked browser in the world, and from my line of thinking is that they are eithe...
Looking for Cross, Browser, Compatibility, Problems
|
|
Searching Video's for Cross, Browser, Compatibility, Problems
|
advertisement
|
|