473,320 Members | 2,073 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,320 software developers and data experts.

CSS vertical alignment

56
Here is a link to the page in question:
http://test.fether.net/pagelayout.php

I want the three boxes inside the gold area to all be tight against the top of it.

In Safari, the boxes are where I want them, but in Firefox on the Mac and both Firefox and IE on the PC, all three boxes are down about a quarter inch. I listed the CSS code on the bottom of that page, can anyone tell me why the boxes aren't going where they should? Thanks in advance.
Mar 11 '06 #1
5 8424
Banfa
9,065 Expert Mod 8TB
This is a common problem when trying to layout pages, there is nothing wrong with the layout of your tags and your CSS, the problem lies in the white space you have put in the file.

In this case the specific problem is the first   The space you see the the space required to display that space that you have said can not be modified, remove it and the gap disappears.

In extreme cases it has been necessary to remove the normal spaces and newlines between tags to get a page to display as required on all browsers.

In some cases use of the CSS "overflow: hidden;" can be of use.
Mar 12 '06 #2
webhead
56
Thanks, all better now. I don't know why that   was there at all, or how I missed it. Sometimes you just need another pair of eyes. Thanks again.
Mar 12 '06 #3
webhead
56
Similar problem, but I don't have any errant   laying around:

http://www.test.fether.net/WebSlinger/login.php

Firefox on PC and Safari on Mac put the body tight against the header box.
IE on PC puts a very small gap between the header box and the body.
Firefox on Mac puts a large gap between the header box and the body.

The header box is in a division and the body box is in the very next div, nothing between. The CSS for the two divs is:
Expand|Select|Wrap|Line Numbers
  1. #headbox {
  2.     margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
  3.     width: 780px; height: 159px;
  4.     text-align: center;
  5. }
  6. #pagebox {
  7.     width: 780px;
  8.     margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;
  9.     border-width: 0px 2px 0px 2px; border-style: ridge; border-color: pink;
  10.     background-image: url(../images/WSbktile.jpg);
  11.     text-align: center;        /* for IE which ignores auto */
  12. }
  13.  
  14.  
Any ideas?
Mar 31 '06 #4
Banfa
9,065 Expert Mod 8TB
The problem is in the html you do have an errant space (not a &nbsp; just a normal space) between the the end of the image tag and the closing </div> tag in the head box.

[html]
<div id="headbox"><img ... > </div>
^
Here
[/html]

BTW did you know that

margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;

could be written

margin: 0px auto;

This has 4 general forms

margin: <AllMargins>;

margin: <TopBottomMargins> <LeftRightMargins>;

margin: <TopMargin> <LeftRightMargins> <BottomMargin>;

margin: <TopMargin> <RightMargin> <BottomMargin> <LeftMargin>;


Also works for padding.
Mar 31 '06 #5
webhead
56
Ah, thanks. It's one of those little things like not having any space around textarea tags, took me quite a while to find that one out. Dang details.

Somewhere I found a page that tells of all the CSS shortcuts, but sometimes I just don't feel like looking it up right away. Now I don't have to! Thanks!
Mar 31 '06 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

8
by: abracad | last post by:
Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?
10
by: Markus Ernst | last post by:
Hi I have a strange problem with vertical-align. The case can be viewed at http://www.brainput.info/geschichte.html. HTML code: <div id="bild"><img src="geschichte.gif" width="274"...
3
by: Frank Wheeler | last post by:
Why am I unable to attain proper vertical alignment between a DIV and a TABLE here: http://www.whbvillage.com/agenda-archives/agendex.html The DIV is coded: <DIV style="float: left;...
1
by: Kenneth | last post by:
Okay, I've been scouring Google for hours looking for a solution to this problem, but as of yet I can't find one. XHTML Transitional seems to specify that I can no longer set a table's height to...
5
by: Rico | last post by:
I have label that I need to be vertical. The problem is that when I select "Vertical=yes" the label reads from top to bottom rather than bottom to top (which i need). Can this be done? Any...
6
by: Andy Mabbett | last post by:
Please can someone remind me of the most elegant fix for the way Firefox fails to vertically align cell content by default? For example, the second event on: ...
11
by: C.W.Holeman II | last post by:
I what to hide an input element and the following text. I have the selector for the input working and just need to grab the text following it. CSS: form{ display:table; text-align:center; }
2
by: esteuart | last post by:
I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has...
8
by: ayamopamo | last post by:
Hi- I am trying to center a web page. It seems like this should be very simple to do, but apparently it isn't my day. I have successfully centered the background by calling it in the css body tag:...
13
by: Bill | last post by:
Hi How can I have IE7 act correctly on that ? The rules make the link text go down when hovered. It works in FF , I had to add a hard space right after the LI tag to have OP9 work but I can't...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.