Div position problem

Hello all

I am having a problem with my layout, I have two columns which consist of a left div with a slider and content at the bottom of the slider and then a right div which contains four small divs sitting on top of each other, However, this right div should be sitting at the same level as the left div slider but is not, rather it is sitting below the slider. I have tried using the margin-top property and it worked only when the property reached minus 450px, however if I re open this page, the right div will have moved to the bottom of the page again, what am I missing? I don’t want to use position absolute because this will overlapp my footer, what do I do? Please help

thank you in advance

Etiketler: div, position, problem

Suggestive Text appearing too far left

Hi,

Take a look at this page:

http://www.prima.cse.salford.ac.uk:8…in/testing.php

When you start typing in the box, “Peter…” You will see a blue dropdown. Problem is that it appear way off the page towards the left.

Any ideas why this is? It should be appearing directly underneath the box..

Would appreciate if someone can help me out

Etiketler: appearing, far, left, suggestive, text, too

Extra space below element in ie6 and 7

Hi everyone,

I’m putting together a new web page but I’m having problems with a spacing issue. In the following code, there’s an h1 element that’s contained by a div with an id of “header”.

Code:

Home
About us
Treatment
Seminars
Testimonials
Location Map

Logo
Contact us

The h1 element has a logo in the background using css.

Code:
#header h1 {
float: left;
margin-left: 16px;
width: 403px;
}

#header h1 a {
display: block;
width: 403px;
height: 73px;
text-indent: -9999px;
background: url(../img/Logo.gif) no-repeat;
}
Below the header div is another div with id of “primary”.

Code:
#primary {
float: left;
margin-top: 10px;
width: 596px;
}

#primary .feature {
position: relative;
height: 269px;
overflow: auto;
background: #f7f6e9 url(../img/bg-family.jpg) no-repeat;
}

This is floated left and also contains an image in the background.

In most browsers, eg. Safari, Firefox, IE8 etc. there’s the correct amount of space between the bottom of the logo in the h1 and the “primary” div but in ie7 and 6 there’s a lot more space than there should be.

I’ve put the sample page up on a web server and wondered if someone could tell me what the problem might be in these two browsers?

http://files.officelinkonline.com.au/test

http://files.officelinkonline.com.au…css/screen.css

Thanks in advance for any help.

Etiketler: and, below, element, extra, ie6, in, space

Why does CSS look bad in IE and not other browsers?

Hello SitePoint.
I am designing a website. I am trying to get the divs to show up correctly in IE. Can anyone tell me what I am doing wrong?
Thank you.

Etiketler: and, bad, browsers, css, does, ie, in, look, not, other, why

Loading gif positioning prob

Hi from monsoon weather conditions Wakefield UK

On this page:
http://www.pauserefreshment.co.uk/ca…-spaziale.html
ive been experimenting with Jquery lightboxes detailed here:
http://leandrovieira.com/projects/jquery/lightbox/

Ive had good success but have one problem… I just cant get the loading gif to sit centrally in the picture. It sits to the left as depicted in the above screen shot and heighlighted with a red circle.

To see the problem click on the first thumnail pic of a male holding a coffee flask.

So my question is:
“Is there a css solution to get the loading gif to sit centrally?”

Any insights welcome

Etiketler: gif, loading, positioning, prob

CSS List BG Image Help

I have a css unordered list that I want each list item to have a different background image (not bullet image)

How would I go about doing this, for the life of me all the ways I have tried the images is not showing up. It’s probably something simple but any help would be appreciated.

This is the html that I have

Code:

Home
Services
Folio
Contact

This is still your header div

the css that I have so far is

Code:
/* Redefine generic tags */
body {
margin-top: 0px;
padding-top: 0px;
}

img a { border: none
}

/* Other Tags */

#page-wrapper {
border: medium solid #03C;
margin-right: auto;
margin-left: auto;
overflow: hidden;
width: 990px;
}
#header {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
height: 200px;
}

#page-wrapper #header #top-nav ul {
list-style-type: none;
margin: 0px;
}

#page-wrapper #header #top-nav ul li .home a {
background-color: #FC3;
background-image: url(../images/home-nav.png);
background-repeat: no-repeat;
display: block;
height: 135px;
width: 135px;
}

#content {
}
#footer {
background-image: url(../images/graf-footer-bg.gif);
height: 140px;
width: 990px;
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FFF;
background-repeat: repeat;
}

Etiketler: bg, css, help, image, list

IE Background Positioning Is Off

Hey everyone,
I have a website in development here: http://tinyurl.com/3yq96dw

And the background positioning in Internet Explorer 8, 7, and 6 is off. I can’t figure it out for the life of me.. I have set IE specific sylesheets with different background positioning but it shows the image 2x (once in the wrong position and once in the right position).

It almost feels like the CSS is getting rendered twice for some reason, because you can see the list images display in the right place at first, and then they mess up right afterwards. See the list graphics, sidebar checkmarks, and footer image are all askew in IE.

The list images are the most noticeable.. It should look just like how Firefox displays the page.
Any ideas? Is this an easy fix?

(Also, I have removed the IE CSS specific files to show how it renders just from the style.css file)

Thanks!

Etiketler: background, ie, is, off, positioning

Can I give 100% width to a list?

I have an unordered inline list with items. I want these items to stretch across the page within it’s div. Basically the first will be on the far left. The last will be on the far right. Everything else will be eventually spaced in between.

How can I do this. Is it possible? Here’s an example of how it looks currently when NOT WORKING:

http://picasaweb.google.com/lh/photo…eat=directlink

This is the working version:

http://picasaweb.google.com/lh/photo…eat=directlink

Suggestions?

Etiketler: 100, can, give, list, to, width

Expandable css div

Hi all,

As i spoke in my other post i have a main div called content that contains an background image how can i increase the height of this without using overflow css propety with scroll bar option?

i i want to expand the height of the image without it being repeated or making changes in photoshop? so how can i do this?

Thanks,William

Etiketler: css, div, expandable

css validation

hi
any body help me.i m doing css validatiuon (http://validator.w3.org/check} and
Validation Output: error occure i am tried to solve these eerrors help;

character “b” not allowed in prolog

body {
character “b” not allowed in prolog

background-position: center 0;

character “f” not allowed in prolog
need help

Etiketler: css, validation