473,387 Members | 3,801 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Relative Positioning and Browser Compatibility

Hello everyone.

I'm designing a site for a friend of mine and I'm having a few issues.

First off, I'm noticing that there is a difference between the default line-
heights of IE and Mozilla/Firefox. I've tried different things like setting
every line-height to zero 'px' by * {line-height: 0px;}, and it just messed
things up even further as you will see if you click on the link below. Before
the adjustments this morning, everything was lined up perfectly in IE and off
in Firefox. Take a look at the link below.

www.ibtestsite.info

Also, the text for the links and the angular rectangular backgrounds are
separate. In my stylesheet, each word has it's own 'class' because of the
position and color of the text and the rect bkgd images each have their own
class because of their position. Everything has absolute positioning - which
works but I'm told wouldnt' be a good method to use absolute positioning for
everything.

Now I tried to use relative positioning for one word (the second link, the
word 'Our' in Our Look) and it put the word below the rectangular link bkgd??
Why? And this is with the stylesheet code:

our2 {position:relative; left: 30px; top: 0px; color:white; font-size: 80%;
font-family:Arial;}

I would think that because I set "top: 0px;" it would be almost centered.
Anyone know what's going on and how to solve it?
Dec 18 '07 #1
3 3595
LayneMitch wrote:
I'm designing a site for a friend of mine and I'm having a few issues.
Yes. Where to start...?
First off, I'm noticing that there is a difference between the default
line- heights of IE and Mozilla/Firefox.
Not so much as to matter. Your visitors won't be using more than one
browser. Regular surfers do not compare sites in multiple browsers, only
us developers/authors do that.
I've tried different things like setting every line-height to zero
'px' by * {line-height: 0px;}, and it just messed things up even
further as you will see if you click on the link below.
All to zero? I'm surprised the page worked at all.
Before the adjustments this morning, everything was lined up perfectly
in IE and off in Firefox. Take a look at the link below.

www.ibtestsite.info
Oh my.

Before we go further,
1. Optimize all your images for the web. The image White-Jacket-Girl.gif
is 998.87 KB (1,022,845 bytes)! Twice! Resize it to the actual
dimension you want, and set the <imgheight and width to the exact
numbers used in the graphic. A JPEG would be more suitable. Do the
optimization for all your images.

2. Switch to HTML 4.01 Strict, and dump that xml prolog on the first
line. IE doesn't know what to do with that, and goes into Quirks mode.

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

3. Read this: http://k75s.home.att.net/fontsize.html

4. Dump your New-Foreground.jpg and place content individually, using
text where possible so it can be indexed.

5. Don't use spaces in file names, e.g. "../Our Style Page.html". Use
all lower-case too; makes life less confusing.
.. Everything has absolute positioning - which works but I'm told
wouldnt' be a good method to use absolute positioning for everything.
Exactly. There is no need for it.

Fix the above, then come back for further advice.

--
-bts
-Friends don't let friends drive Vista
Dec 18 '07 #2
Beauregard T. Shagnasty wrote:
>Fix the above, then come back for further advice.

Will do so. Working on it right now, so if you go to the site it won't look
right.
Would really appreciate it if you check this topic periodically for responses.
Also, I'm a beginner at this..lol...I'm sure it shows.

Thanks.

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

Dec 18 '07 #3
In fact,

I'm just going to redesign the entire site.

Thanks for the information.

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/css/200712/1

Dec 18 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I...
2
by: Stephen Weatherly | last post by:
Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I...
2
by: Catherine Lynn Wood | last post by:
I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references...
3
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...
17
by: George Hester | last post by:
http://tinyurl.com/5uj6w The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that? Also the navigation divs both top and bottom should follow the...
20
by: Geoffrey H. Goldberg | last post by:
I have made a remote control window which opens from its parent. On loading, the remote is positioned relative to the screen using window.moveTo(x,y). What I would like to happen is the remote...
1
by: Fred Nelson | last post by:
Hi: I'm working on one of my first web applications in asp.net 2.0 and I'm having a problem with absolute versus relative positioning of controls that I place on pages that use master pages with...
4
by: Alex | last post by:
Hello, I'm rewriting our corporate website, and to make editing the format later I want to rewrite it completely using CSS with no table tags. I've used CSS for years, but never exclusively, so...
1
by: alice | last post by:
Can someone point me to a page that has good info on how the different browsers handle positioning? I'm finding that position:absolute works differently between Safari and IE7. Sort of ironic if...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.