Relative Positioning and Browser Compatibility

LayneMitch

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:relat ive; 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

Subscribe Reply

3610

Beauregard T. Shagnasty

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

LayneMitch via WebmasterKB.com

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

LayneMitch via WebmasterKB.com

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

Similar topics

10989

Relative Absolute Position

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 scroll/resize. Then the image "moves" on the screen but the animation doesn't. The net effect is that their relative positioning changes. I'd like...

Javascript

7742

Help with table width and CSS relative positioning

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 am placing a transparent gif over the top of a normal gif) then the width of my table is large enough to accommodate both images side by side My...

HTML / CSS

12010

overlapping layers relative to interior page content

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 back to 0,0 on the entire page. If I set it to relative, the div layers will not overlap as needed. I prefer to avoid javascripting an 'innerHTML'...

HTML / CSS

19752

Position relative to parent element

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 test case element1 and element2 should be placed side by side inside a centered white container element: http://www.markusernst.ch/test.htm

HTML / CSS

3030

IE 6 has trouble with relative positioning?

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 scroll right. Both of these issues occur in IE 6 but not in IE 5.5. You can get the horizontal scroll bar for the window by increasing the size of...

Javascript

10997

Positioning a child window relative to the parent

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 control to open docked in a specific location relative to the parent (opener). Fortunately, I need this to work ONLY in IE, so at least I don't...

Javascript

1798

Master Pages & relative/absolute positioning?

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 Content Place Holders. The controls placed in a content area with absolute or relative positioning can easily "drift" beyond my Content Place...

ASP.NET

9679

Positioning DIV's relative to each other

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 I'm having some problem converting some of the Table tags into CSS. My first hurdle is we have a table with three TD's and I don't know how to...

HTML / CSS

2526

absolute positioning differences

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 you ask me. I can't seem to easily find anything on the web about how to handle this. Is there some sort of hack for IE?

HTML / CSS

7510

What is ONU?

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7703

Problem With Comparison Operator <=> in G++

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7947

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...

Online Marketing

7463

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

7797

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

6032

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...

Career Advice

3493

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

3473

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

748

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General