473,850 Members | 2,069 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Mozilla/Firefox and negative top property...

I'm just starting the process of reorganising my modest little website
and cleaning up all the HTML, and the logical place to begin was with
the homepage. I made a simple little ASP.NET control that I can drop
into the beginning of any page and it will generate HTML to display my
logo, a link, and (optionally) a quote of the day, all of which will be
horizontally centered at the top of the page by my default stylesheet.
For the main page, though, I want to use the exact same HTML but have
it centered vertically, too, using a style defined in the page itself.
It *almost* works...

I'm using a variation on the vertical centering solution where you wrap
the content to be centered inside of a <div>, absolutely position the
wrapper <div> halfway down the browser window (using top: 50%;), set a
height on the block containing the actual content, and then set the top
margin for that same block to the negated value of half the height.
The way I've done it is different in that I didn't specify a height and
just set the top of the content block to -50%;...and it actually works.
Well, for the most part.

If I use this style...

#BannerContaine r
{
left: 50%;
position: absolute;
top: 50%;
}

#Banner
{
left: -50%;
margin: 0;
position: relative;
top: -50%;
}

....in IE 6 it displays perfectly: my banner is horizontally and
vertically centered in the browser window. In Mozilla 1.7.11 and
Firefox 1.5, though, it's centered horizontally but *not quite*
vertically. The top of the banner block is halfway down the browser
window, whereas what I want is the *middle* of the banner to be halfway
down the browser window. So, I don't know if it's a bug or expected
behavior, but in Mozilla/Firefox it's ignoring my top value, and that's
not what I want. Oddly enough, it seems to accept a negative value for
the left property just fine, so I don't know what it doesn't like about
top. Also, if I open the DOM Inspector in Firefox and look at the
Computed Styles for #Banner, it says the top property is being
calculated as -62.4667px, which sounds about right. So, it looks like
it's seeing the top property and correctly applying it to the #Banner
element, it's just that for some reason that's not carrying over to the
rendered page.

I know I could just solve this by reverting to the aforementioned "set
a specific height and use negative margins" solution, but I'd like to
stick with this one if possible because A) the programmer in me doesn't
like the idea of hard-coding a height for content of variable or
unknown height, B) this solution is surprisingly flexible (the banner
block will grow as needed for whatever content is in there, and if I
set a specific width then the text for longer MOTDs wraps nicely, too),
and C) like I said this method works *almost* perfectly and I feel like
I'm just a tweak or two away from getting it to work in
Mozilla/Firefox. I just can't figure out what that tweak might be. I
tried adding !important to my top property, but that didn't change
anything. Any ideas?

The page I'm working on is located at http://nocab.org/Index2.aspx and
the external stylesheet is at http://nocab.org/NOCAB.css. I added the
colorful borders to everything just so it's easier to see what's
actually going on.

Some notes:
- I rolled my own server-side solution for IE's PNG alpha transparency
bug, which is why you'll see slightly different HTML for the banner
logo in IE compared to non-IE browsers.
- I know having a homepage that does nothing but link to itself is
pretty pointless...but A) that's how it's always been and B) that's how
it will be until I get my site's content hierarchy all figured out.
- Though I do enjoy learning how to create semantically-rich HTML and
style it appropriately, I'm not very good artistically and still have a
lot of ropes to learn with CSS...so go easy on me!

Thanks for the help.

Jan 9 '06 #1
0 1437

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

Similar topics

10
3611
by: tony kulik | last post by:
This code works fine in ie and opera but not at all in Mozilla. Anybody got a clue as to how to get it right? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script language="JavaScript" type="text/javascript"> function show(that) { if (box.style.visibility=='hidden') { that.style.visibility = 'visible'}; }
6
5173
by: Patrick | last post by:
Hi I am fairly new to CSS and the web.I am trying to build a site more to practice my skills than for the site itself. I have been focusing on CSS and try my best to make it work in I.E 6.0, Opera 7.23, Mozilla 1.4 and N.N. 7.1. My site was doing fine until i read i was supposed to keep everything validated so i entered a strict html 4.01 doctype with url following.My HTML validated fine. So i validated my CSS and beside a little...
6
13387
by: Luke Dalessandro | last post by:
I'm not sure if this is the correct forum for platform specific (Mozilla/Firefox) javascript problems, so just shout and point me to the correct newsgroup if I'm being bad. Here's the deal... html file (generated using .NET 2.0 beta2): <form method="post" action="Test2.aspx" id="form1">
2
6807
by: Robert Oschler | last post by:
I have Javascript code that clears the SRC property of an IFRAME during the onload event of a web page, if a certain flag is set. In Mozilla/FireFox the clearing of the SRC property works fine and the browser does not attempt to load the document. That document being the one that was specified in the SRC property, before it was erased. In Internet Explorer, the code appears to clear the SRC property properly. If I trace the code, the...
7
1952
by: Stefan Mueller | last post by:
I choose 'Entry 4' and click then on the button 'Set' to set the index to 'Entry 2'. If you press now the cursor down key 'Entry 5' instead of 'Entry 3' shows up with Mozilla Firefox. With Internet Explorer and Opera it works fine; 'Entry 3' shows up. Is this a bug within Mozilla Firefox or do I have any possibility to change this wrong behavior? Stefan ========================
0
1922
by: BACON | last post by:
I'm just starting the process of reorganising my modest little website and cleaning up all the HTML, and the logical place to begin was with the homepage. I made a simple little ASP.NET control that I can drop into the beginning of any page and it will generate HTML to display my logo, a link, and (optionally) a quote of the day, all of which will be horizontally centered at the top of the page by my default stylesheet. For the main page,...
5
5808
by: BACON | last post by:
I'm just starting the process of reorganising my modest little website and cleaning up all the HTML, and the logical place to begin was with the homepage. I made a simple little ASP.NET control that I can drop into the beginning of any page and it will generate HTML to display my logo, a link, and (optionally) a quote of the day, all of which will be horizontally centered at the top of the page by my default stylesheet. For the main page,...
10
2387
by: News | last post by:
I have a page up trying to learn how to ID a browser and other info. http://wyght.com/warren/testPos.html here is the code <script type = "text/javascript"> var space = ", "; var name = navigator.appName;
28
6711
by: Wladimir Borsov | last post by:
The HTML source of one of my web pages starts simplified with a code like: ---- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ..... <BODY BACKGROUND="images/myback.gif"> <div id="content" style="position: absolute; top: 0; left: 255px; width: 700px; z-index:-1; background-color: transparency;"> Blah blah blah </DIV> </BODY>
0
9895
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, 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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9741
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10666
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10351
tracyyun
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7899
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7071
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5735
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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
4140
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3178
bsmnconsultancy
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.