CSS - There Must Be A Cleaner Way - Css Cleanup Help Needed.

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

Hey all,

I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work.

So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds.

What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has.

I just can't get it to work. Can anyone help me?

Thanks a lot.

Regards.

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.

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 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

Hello,

can someone please take a look at this site:
http:// www . jamandcheese . be/dump/index.html

As you can see, I'm having some trouble.

1. I can't get the navigation to work properly. It needs to be vertically centered and the sliding doors hover effect isn't quite right. Don't know how to solve this one!

2. under the white box (i'll add a slideshow later) there are two buttons. The bottom text overlaps the text above. How can i solve this? And how can i get the hover effect to work? When you hover over, text needs to become white with dark text-shadow.

3. the 2 lists at the bottom are floating left. They need to be centered like the screenshot below. When i give both ul a margin, they jump underneath each other. Please help!

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 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

Can someone please explain why this page looks this way? It's happening in all the browsers used.

http://cjenkinsweb.com/shutterstock_submit.JPG

here is the way it normally looks, in terms of style. Of course you will not be logged in, so it is not the same content.
http://submit.shutterstock.com/main.mhtml

I would appreciate an opinion.
Thanks.

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'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