CSS - Absolute Div Below Absolute Div (spacing / Different Font Sizes?)

Good Day,

Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem?

Best,
Colin

PHP Code:
#searchBox {
    float:right;
    margin:0em;
    padding:0em;
    margin-right:0.2em;
    clear:right;
    background-image:url(/images/site/backgrounds/searchBox.jpg);    
    /*border:black solid 1px;*/
}
#searchBox input {
    margin:0em;
    padding:0em;
    background-color:#d2c5a2;
    
}
.submit {
    background-color:#6F5F42;;
    color:#483e2b;
    font-size:smaller;
    font-weight:bold;
    margin:0em;
    padding:0em;
} 





and html

PHP Code:
<div id="searchBox">
            <form action="search.php" method="post" style="margin:0em; padding:0em;">
                <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;">
                    <label>What are you shopping for?</label><input type="text" name="search" size="14"/>
                    <input class="submit" type="submit" name="submit" value="Search" />
                </fieldset>
            </form>        
        </div> 





i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!!

also is there anyway to make sure that the font sizes are same/similar in both IE and FF?

http://www.zahra-zahra.com/fullpage.html


EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box..

Hi there,

I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work.

How can I center them vertically?

Thanks!

Hi,

If you set a font-size: 7pt and font-family:Verdana in your stylesheet, does the text in your webpage look slightly bigger in Firefox than in IE 6?

I'm using Windows by the way ... this is just a general question as some of my menu links are lined up well on IE (which displays text a bit smaller) but overlapping to multiple lines on Firefox (because the text size is slightly bigger)

Many thanks!

I am trying to position a footer at the bottom right hand corner of the page with style Code:

{position: absolute; bottom: 0px; right: 0px;}

However, the footer is not lying on the bottom, its about an inch off the bottom, interfering with a form field. How do I fix this?

When using Absolute positioning is it best to have the first <div> be static so that that the Absolute Positioning has something a reference point?
Thank you

I can't create a complicated webpage without using absolute positioning for areas.
For ex I want to create 2 top areas of screen width on top of page. Then I want 3 columns with 1st and 3rd columns having 3-4 seperate containers. Without using absolute I am way to confusied to get this happening.

I've only just started mucking round with CSS. Just by looking at other peoples sites and seeing how they do something, and then mucking around with what they've written to learn it.

What I am trying to do at the moment, is just have a blank page with at the absolute center (Vertical and Horizontal) of the screen have some text. But the text is only horizontally centered not vertically.

Heres the codes:
In seperate stylesheet
Code:

#center {
	position: absolute
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}

and in the page

Code:

<div id="center">
      <p><span class="aus">Austrlia</span><br>
        <span class="contact">admin@sixfootone.com +61 412 587890</span>
        </p></div>

Any ideas?
Thanks

Good morning,

I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out.

I have a floating bar with all of my navigation links in it which is absolutely defined with the following code:

Code:

#headerBar { /* sets position of floating bar */
	position: absolute;
	clear: both;
	top: 57px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 100%;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: .50;
		}

The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be.

The url is: http://www.alokw.com

Any suggestions?

Thanks!

Hello All.

I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe

BUT, I have ran into a problem on myspace with code.

I am trying to create a linkable image I believe it would be called.

<a href="website url">
<img src="wouldnt let me post url's" />
</a>

Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.)

I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also.

I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage.

Thanks in advance to anyone who replies, and also apologies for my incredible noobness.

-Connor

I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he
http://www.goldenturmeric.com/layout.php

The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know.

Anyone's help is much appreciated.

If I do something like this:

.divSubHomeRtPhoto {
position: absolute;
left: 340px;
top: 167px;
width: 420px;
height: 420px;
}

Then <div class="divSubHomeRtPhoto">
my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet.

What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work.

How do other cross browser CSS writes deal with this problem?

Thanks for your help

CJB

I have a div that should be sat at the bottom of its containing div (absolute positioned, bottom: 0, right 0) and it does so in Firefox, but in IE it is raised by about 20px or so.

Any help to iron this out would be great.

The page and its effects can be seen at www.prioritypie.f2s.com/KSA/KSA6/index.htm

and the css at www.prioritypie.f2s.com/KSA/KSA6/styles/KSA6style.css

It's the "menuContainer" div which isn't sitting right, nested in the "header" div.

Many thanks for any help

I have a DIV that is positioned as absolute and have used the required CSS to make it centered. But when viewed in Internet Explorer it is 1 or 2 pixels off-center??

Here is the CSS code:

Code:

div.mpheader { 
position: absolute; 
display: block; 
overflow: hidden; 
padding: 0px; 
top: 0px; 
width: 900px; 
height: 655px; 
margin-top: 0px; 
margin-left: -450px; 
left: 50.0%; 
background-image: url(images/header.png); 
}

and the HTML code in the body:

Code:

<div class="mpheader">
</div>

and here is the link to the site:

highriserocks.com/maydayparade

I have other CSS for A classes which are inside the DIV tags also but it's just the main image that is slightly off center.

Any ideas??

Much appreciated!

Adam