CSS - Css Coder Needed - Money Waiting.

Well...
I have a stylesheet linked to all my pages and i want to add some text to the top of each page on the site, i have seen it done befour so don't say it is impossible and no it wasn't in php it was something like this:

</style>
blah blah blah

that was at the end of the stylesheet so the texts is written in html not css, anyone know how to do it caus when i use the code i wrote there it dosn't work for some reason

I got a question. Can I anyhow create two equally tall div elements which like tables do, would lenghten together when I add content more than default 100% to another of these two elements, and using just pure CSS? I have a website that haves a div element named "body" which contains another div called "right", so the main element is separated in two parts.

I've set the height of the both elements to 100% and they are positioned relative. Now, when I add content more than the default 100% to another div, the text will overflow the whole body element.

And when manipulating the body div source code by replacing the property height:100%; to min-height:100%; the problem with the height is solved but the right aligned div gets shorter a quite.

I have asked for help from another sources also, and some people gave good advices for me to consider using the faux columns method. Well, it would be one solution, as also if I replaced the body element by a table - but I sure want to be aware if there's a solution for this using just plain CSS. Thanks in advance.

Here's also the source code:

Quote:
body,html {
margin:0;
padding:0;
background:#C73F17;
height:100%;
}

#body {
margin:auto;
height:100%;
width:90%;
border-left:solid #000 1px;
border-right:solid #FFB00F 1px;
background:#FFFFCC;
}

#header {
height:70px;
border-bottom:solid #000 2px;
text-align:center;
background:#1c1c1c;
}

#footer {
height:25px;
border-top:solid #1c1c1c 1px;
background:#000;
}

#right {
float:right;
width:150px;
height:100%;
border-right:solid #FFF 1px;
background:#1c1c1c;
}

#nav {
height:20px;
border-bottom:solid #000 2px;
background:#282828;
}

Hi Folks,

Trying to get the following CSS code for page navigation to work on my site ((See example at bottom centre of this page add.ie/index.php?page=new&cid=6). You can see it working properly here on Yahoo.

(h)ttp://uk.search.yahoo.com/search?p=news&ei=UTF-8&rd=r1&fr=yfp-t-501&pstart=1&b=11)


#pg {clear:both;color:#3666d4;height:2em;margin:2em 0 2em 250px;}
#pg a,#pg strong{border:1px solid #ccdbe4;display:block;color:#3666d4;float:left;margin:0 2px 0 0;padding:1px 8px;text-align:center;text-decoration:none;}
#pg a:hover{background:#3666d4;border-color:#2b55af;color:#fff;}
#pg strong{border:0;color:#000;font-size:107%;font-weight:bold;padding:2px 6px;}


All is working fine, but for some reason when i click on a page number (See example at bottom centre of this page ((See example at bottom centre of this page (add.ie/index.php?page=new&cid=6), that page number jumps up like the picture i have attached. I can't seem to get the <strong> tag to force the text that is NOT a link to show like Yahoo within the other page numbers.

Any ideas please?

Thanks,
S

http://www.firstinsurancefunding.net

Look at the top right button in both browsers. In FF2.0, this shows up WAY to the right. In IE6.x it's fine. I don't have IE7 on my computer to compare it.

Can someone provide a fix, or tell me what info you need?

Hello.

I really need some help with this problem. If you are willing to help, check out the site with my problem:

http://www.test.cos.ucf.edu/content/deans/staff.html
(this link may expire within a few months of post date)

I'm a student, but I'm getting paid to develop this site (not enough payment of course ). Hopefully you don't mind helping anyways. Looking at this page in Firefox shows no problems, yet in IE 7, it looks much worse. There is a problem which I am not aware of. Is it like anything you have heard of?

Thank you for the help


---------------------
FIXED
---------------------

The problem was with a contained div with overflow set for vertical scrolling. However, there was a ul with li's floating within it within the div to make a grid. Each li had an image within it with position:relative. This relative positioning screwed up the scrolling for the div. So I added padding to each li element to make up for the top and left properties. If you want a better explanation please ask. Since I could not quickly figure out how to delete this post, I figured I would explain the solution. Thanks!

Hello,

I building a page with a form. Tables would be super easy, but my client expects web 2.0

Here's the page: http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php

I'm currently using <span class="form">, or <span> but look totally different on different computers (i.e. Firefox on PC or MAC)

Here's my CSS: Code:

.last_name
{
margin-right:230px;
}

.first_name
{
margin-right:220px;
}

Can anyone tell me the best approach? Basically I need each field's text to line up below and to the left.

The form is a lot longer and has varied width fields throughout. Any help or ideas are appreciated.

thanks
-S

Hello All,

I have issues with the repeating background on IE only.
In firefox,it works fine.

Please find the attached ZIP file for all the content with its assets.

I am trying to have a curved images on the TOP LEFT & TOP RIGHT only and a image background on the content. In Firefox, the content background is not repeating after the TOP RIGHT and fits correctly. But in IE, the content background is extended after the TOP RIGHT.

Please advice.

Thanks in advance.
John

Hi everyone,

I'm in trouble, I need to get this page ready by tomorrow and I'm stuck with the alingning of the section under the heading. It should look as three columns (two sidebars + center) and I just can't figure why it doesn't get alingned properly.

the page is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A Porte Aperte - Comune di Sarno</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="divWrapper" >
<div id="Header">
<div id="FotoSX"><img src="images/headsx.gif" alt="Comune di Sarno" /><img src="images/fascia02.jpg" alt="Comune di Sarno" /></div>
</div>

<div id="SidebarSx"><ul>
<li><a href="(URL address blocked: See forum rules)">Risorse Utili</a></li>
<li><a href="(URL address blocked: See forum rules)">Sportello online</a></li>
<li><a href="(URL address blocked: See forum rules)">Leggi e normativa</a></li>
<li><a href="(URL address blocked: See forum rules)">Storie di vita vissuta</a></li>
<li><a href="(URL address blocked: See forum rules)">Lascia un commento</a></li>
</ul></div>
<div id="ContenutoCentrale">
<div id="Banner">X</div>
<div id="Sportello Antiusura"> <ul>
<li>SPORTELLO ANTIUSURA</li>
<li>SEDE</li>
<li>ORARI</li>
<li>PROFESSIONALITA' COINVOLTE</li>

</ul> </div>
<div id="TestoInfo"> TESTO TESTO TESTO </div>
</div>

<div id="SidebarDx">
<ul>
<strong>Links Utili<br /><br />
</strong><li><a href="(URL address blocked: See forum rules)">Enti ed instituzioni</a></li>
<li><a href="(URL address blocked: See forum rules)">Regione</a></li>
<li><a href="(URL address blocked: See forum rules)">Provincia</a></li>
<li><a href="(URL address blocked: See forum rules)">Comune</a></li>
<li><a href="(URL address blocked: See forum rules)">etc</a></li>
<li><a href="(URL address blocked: See forum rules)">etc</a></li>

<li><a href="(URL address blocked: See forum rules)">Associaczioni</a></li>
<li><a href="(URL address blocked: See forum rules)">***1</a></li>
<li><a href="(URL address blocked: See forum rules)">***2</a></li>
<li><a href="(URL address blocked: See forum rules)">***3</a></li>
</ul>
</div>
</div>


</body>
</html>

and the CSS is:

#divWrapper {
width: 898px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #AA0C00;
border-left-color: #AA0C00;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
}
#divWrapper #Header {
background-color: #899933;
padding-top: 15px;
padding-bottom: 15px;
}

#divWrapper #SidebarSx {
background-color: #BCCC66;
display: list-item;
list-style-type: none;
padding: 15px;
width: 150px;
}
#divWrapper #SidebarSx ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#divWrapper #SidebarSx a {
padding: 8px;
margin-top: 10px;
margin-bottom: 10px;
display: block;
width: 150px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #899933;
border-bottom-color: #899933;
text-decoration: none;
color: #000000;
}

#divWrapper #SidebarSx a:hover {
background-color: #DDE6B3;
}




body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000000;
background-color: #ACA151;
margin: 0px;
}

#divWrapper #Header #FotoSX {
float: none;
text-align: center;
}
#divWrapper #ContenutoCentrale {
float: left;
padding-top: 20px;
padding-right: 45px;
padding-bottom: 20px;
padding-left: 45px;
list-style-type: none;
background-color: #DDE6B3;
width: 607px;
}
#divWrapper #SidebarDx {
float: left;
background-color: #BCCC66;
width: 170px;
padding: 15px;
position: absolute;
}
#divWrapper #SidebarDx ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#divWrapper #SidebarDx a {
padding: 8px;
margin-top: 10px;
margin-bottom: 10px;
display: block;
width: 155px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #899933;
border-bottom-color: #899933;
color: #000000;
text-decoration: none;
}
#divWrapper #SidebarDx a:hover {
background-color: #DDE6B3;
}

Many thanks in advance !!!!!!!!
Ernesto

Hi there,

Please help me with the CSS on my website, http://www.tophatweddings.co.uk

On the home page I am trying to display a product feed as rows of 3. However, you will notice that sometimes it will force a new line. I do not understand what is causing this

The class being applied is he

Code:

#productDisplay li 
{
	float:left;
	width:165px; 
	padding-right:10px;
	padding-bottom:10px;
	padding-top:10px;		
}

Please help oh wise CSS gurus
What should I try?

Hi,

I'm using SIFR for the headlines on my website, to replace my <h1> text. Please look at http://209.172.34.108/~free/kpformations/test.html

The three paragraphs are all <h1> tags but have different sizes. The CSS stylesheet is in the source of the page. Please can you have a look at this and tell me is there any way I can make the <h1> tags the same size and not resize autmatically? I have tried changing the font line height but that didnt work.

Please help!

If you look at this web site
http://www.mobilvox.com/

you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls.

I've been using the code below, and I can't seem to get the same behavoir.

Code:

 <style type="text/css">
  /*<![CDATA[*/



  html, body {
    margin: 0;
    padding: 0;
	background-color:#000033;
	
    }
    
  body {
    font: 100%/1.25 verdana, arial, sans-serif;
    color: black;
    background-color: #eef;
	overflow: auto;
    }
    
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
    
  p + p {
    text-indent: 1em;
    margin-top: 0;
    }
       
#header {
    color: #000000;
    background-color: #fff;
    overflow: auto; /*encloses float children
                      see http://garyblue.port5.com/webdev/floatdemo.html
                      */
    text-align: center;
    }

#header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
#headermenu1 {
    float: left;
    text-align: right;
    margin-left: 2px;
    display: inline;  /*this is a fix for IE's doubled
                        float margin bug*/
    }
    
#headermenu2 {
    float: right;
    text-align: left;
    margin-right: 100px;
    display: inline; /*same as above*/
    }

#global {
	margin:0 auto;
	width:500px;
	text-align: left;
}

can someone point out the problem.

- Thanks -

Kris

i am totally confused over how to put a form on my pages--
i feel really stupid about this as it just cant be that hard
but seem to have a mental block of some kind-

i would like a form like this one--
FORM EXAMPLE

can anyone tell me EXACTLY where to put the code and what the code for it would be--

i would prefer using CSS not java or PHP.. but dont know if that is totally possible--
i have looked around net and tried some ideas
but i must be doing something wrong as they just dont work right on pages---

i am using two column layout-- here is link to one of the pages i would like a form on

FORM PAGE
thanks in advance-- appreciate any help you might offer

Hi,

I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors.

So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6.

Here is the site (work in progress still):
http://southcarolinanightlife.com/

The CSS for the menu is he
http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css

Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine.

Many thanks if anyone can assist.
Kevin

extremely new to css here...just want a basic template for my first site what im trying to get is....

http://www.samsenterprisesauto.com/template.jpg

what im getting is...

http://www.samsenterprisesauto.com/ie6.jpg
and
http://www.samsenterprisesauto.com/firefx.jpg

ie "looks" pretty good but i cant get rid of the small space between the logo and the lefthand navigation bar

my html looks as follows...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  
<link rel=stylesheet href="testy.css">
</head>

<body>

<div id="Header">
  <div id="Logo">
      <img src="logo.jpg">
  </div>
  <div class="padder">
  <h1>#Header</h1>
  </div>
  <div id="TopBar">
    <div class="padder">
	#Topbar
    </div>
  </div>
</div>

<div id="Main">
  <div id="Left">
    <div class="padder">
    <h1>#Left</h1>
    x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </div>
  </div>

  <div id="Middle">
    <div class="padder">
    <h1>#Middle</h1>
    <p>x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xAll boxes are positioned statically. The #Left and #Right are floated boxes.x x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x xx x x x x x x x x x x x x x x x x x x x x x x x</p>
    </div>
  </div>

</div>

<div class="spacer">&nbsp;#spacer</div>

</body>
</html>

my .css is as follows:
Code:

body {
  margin:0; 
  padding:0; 
  background: #fff;
}
#Header { 
  padding:0 0 0 0; 
  height: 120px;
  background: url(headbg.jpg) repeat-x;
}
#Header #TopBar {
  top: 100px;
  margin: 0 0 0 150px; 
  padding:0 0 0 0; 
  height: 20px;
}
#Logo {
  float: left;
}
#Main {
  margin: 0; 
  padding: 0;
}
#Main #Left {
  float: left;
  width: 150px;
  margin: 0; 
  background: url(sidebg.jpg) repeat-y;
}
#Main #Middle {
  margin:0 0 0 150px;
  border: 0px;
  background: #fff;
}
.padder {
  margin: 0; 
  padding: 10px 20px 0 10px; 
  border: 0;
}
.spacer {
  clear: both;
  height: 0px;
  font-size: 0px;
  border: 0;
  margin:0; 
  padding:0;
  visibility: hidden;
}

not exactly sure where that space is comming from....when i add borders to the different sections, the space is in the logo block but im not sure why since neither the headder or the logo block have any kind of padding specified....

any help would be appreciated