CSS - I Can't Name This, A Css Question

i am having a small issue with font size in browsers.

i am using smarty template engine to create websites, i have originally created the html pages using css after slicing in photoshop. the pages look similar with respect to font sizes in all browsers

when i integrate this html page into smarty i am using a copy of a template in smarty to create a website, so this copy also has a css file, i have commented most of the code in this css file which is in the smarty folder and i have used my css code which i initially created.

the problem i am facing is with firefox only and all other browsers work fine

only in firefox the text for h1, h2, p, ul li, a... etc are all appearing 1px smaller in size when compared to all other browsers

i have tried using !important and inline styles however only firefox is displaying the text in the entire page 1px smaller compared to all other browsers which is not consistant.

i have the following in the css file
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #ffffff;
font: normal 12px Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}



please advice.

any help will be greatly appreciated.

thanks.

OK .. I have 5 layers surrounding each one of my menu links .. the layer over-laps another layer with the main content in. Now if you look here you will see what i mean ....


http://www.geocities.com/jezman2002/index.html

You can see four of the layers but the top one i need to be black AFTER it crosses the line !!!! Do u see what i mean

I just wondered if there was any easy way to do this ???

-Thanks-

I am currently working on a site: www.wirelessguy.net

I am trying to get it so that when links are clicked, the pages load in the middle white section. I don't have the links made yet, but I've been messing with it with text only.

I made the site template in a php file, then I include that file on all my pages that I create.

How can I get pages to load in the middle section of the site?

I'm not sure is this question relating to css or javascript. Pls help. thanks alot

Q1:
What are the ways you can deal with x-browser issues? What are the pros and cons of each?


Thanks,
Gary

Anyone know why the <div>'s aren't displaying correctly in FF? View with IE if you want to see how it should look.

http://www.cooperworkskilns.com

CSS:

http://www.cooperworkskilns.com/styles/layout.css

how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly.

This is simple (I think) -- I'm a bit new to CSS and still learning, so I really appreciate any help you guys have to offer.

I have this page - vitalmodels (DOT) com/V3/

The columns on the right/left, the backround extends past the bottom graphic. I basically need the bottom graphic to be at the literal bottom of the div container so that it closes off the box cleanly. I have tried vertical align/bottom/baseline to no avail. And this is only in mozilla/safari as well... Any suggestions?

Also, a second question. The 3 columns (divs) in the main area, are within a single container div... they don't push that container down when populated with information, and merely overlap... right now I have the container set to a height in order to look decent, but when it's set to "auto" the content in the columns seems to do nothing.

Again, I REALLY appreciate any help I get here... thanks again.

-Ryan



This is the code if you need it -

PHP Code:
#index_left_column {
    padding: 0px;
    float: left;
    height: auto;
    width: 194px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position: relative;
    left: 16px;
    background-image: url(images/index/left_column_bg.jpg) 





and

PHP Code:
<div id="index_left_column">
      <p><img src="images/index/left_column_featured_female.jpg" alt="" width="194" height="26" /></p>
           
       <?php include("inc/m_female.php"); ?>
      
      <p><img src="images/index/left_column_featured_male.jpg" alt="" width="194" height="25" /></p>
       
       <?php include("inc/m_male.php"); ?>
      
      <p><img src="images/index/left_column_featured_photog.jpg" alt="" width="194" height="25" /></p>
      
        <?php include("inc/m_photographer.php"); ?>
     
      <p><img src="images/index/left_column_bottom.jpg" alt="" width="194" height="7" /></p>
    </div> 

Are the HTML tags, <style></style>, in the CSS file? Why do you have two separate body sectors in your CSS? Just put them into one.

Hi...

I was just wondering..

when u have something like:

margin:5px 10px

which side does the 5px and 10px apply to?


thanks in advance

I am new to this stuff started php about a month ago

now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page
also
in FF the nav menu is fine just not in the right location
in IE the bottom half of the nav menu sticks out one inch past the top half

here is my css

PHP Code:
#divNav {
    background: transparent url(../images/bk-nav.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 800px;
}

#nav {
    position: relative;
    top: 55px;
    height: 80px;
    width: 800px;
}

#nav li ul, #nav li ul {
    margin: 0;
    padding: 0;
}

#nav a {
    text-decoration: none;
}

#nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 15px;
}

#nav li ul {
    display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    position: absolute;
    top: 25px;
    left: 0;
    padding-top: 15px;
    background: #224d6f;
    height: 28px;
    width: 740px;
    padding-left: 60px;
}

#nav li.on ul {
    background: #f90;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    background: #224d6f;
}

#nav li a {
    color: #224d6f;
    font-weight: bold;
    display: block;
    width: 93px;
    padding: 0;
}

#nav li.on a {
    color: #f90;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    background: #224d6f;
}

#nav li.on ul {
    display: block;
}

#nav li.off:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
    color: #f90;
}

/*do the image replacement*/

#nav li span {
    position: absolute;
    left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    display: block;
    position: relative;
    height: 26px;
    background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
background-position: 0 0;
}

#liArtNouveau a {
background-position: -102px 0;
}

#liModern a {
background-position: -204px 0;
}

#liPostModern a {
background-position: -306px 0;
}

#liDigital a {
background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liModern.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #224d6f;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}        

#nav li.on ul a {
background: #f90;
} 

Hello, I am in the process of re-doing a page of my site in CSS...the working page is he http://www.tombraiders.net/katie/test/index.html

CSS file he http://www.tombraiders.net/katie/test/style_index.css

I have the body part semi transparent so you can see through to the background a little bit. Now my problem is that the header is also transparent, which is what I don't want.

Does anyone know how I can isolate the body so the header is not transparent as well?

Thanks

'ello

question, right.. a table sumthing like dis..

<table style="width: 100%">
<tr>
<td style="width: 200px;"></td>
<td></td>
</tr>
</table>

gives ya a nice two column layout, where the first has a fixed width, and the second column fill the rest of the parent container.

Also, heres the kicker.. when u get loads of content in the second column, and it get extended vertically, the second container is as well.. and thats nice and all..

So, question.. how do i do this with divisions and CSS? i tried a ton of different stuff, and the closest thing i came was using height: 100% and like, scrollbars in the second column. But i dont really want that.. I think like, min-height is the solution, but a cant tame it, when i start using it.. things goes weird :P

the table model works, but i really want to lean to do this "right" so, lill' help please?

cheers,

I have designed a site that has a centered container div with a set width of 880px. I used the "margin:0px auto;" formatting to center the container div.

Inside the container, I would like to position a div block absolutely or relatively in the page. This is so I can position it over other divs within the container and have control of the look of the page.

For centered absolute positioning, I have seen to use a css formatting of:

"
postition:absolute;
width:600px;
top:10px;
left:50%;
margin:0 0 0 -300px;
padding:5px;

"

The problem here is that on smaller resolutions, the absolute div is pushed to the left and if the browser window is thinner than 600px wide, the div starts to disappear to the left of the page.

Any help would be appreciated to help me figure out a better way to position this internal div without hiding it or moving the other content on the page.

Thanks

I have an section of code, that on the html side has 7 items in a list, and it's displaying vertically, how (if any) is it possible to break up items and arrange them horizontaly within css?

Is there anyway to make a border smaller so that it is not bigger on the right side than on the left (i.e. On the left side, the border line is right at the edge of the picture while on the right it's about a mouse cursors length away.)