CSS - Why Does This Not Render As The Same Size?

http://dailyblogdose.com Above the image there is a bunch of links to the different pages, well on Firefox when you hover on them, there is a border-bottom underline. On IE7 however it disappears.

I could get them back by adding display:block; to #pages ul li a:hover however it makes them look slightly elevated. Any other ways?

Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it.

I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is:

frontlinescreative.com/aljc2/indexCSS.html

In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser.

My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right.

Any ideas on where I've gone wrong?

I'm trying to create a block quote like in the image below:

http://www.norrislakevillas.com/images/block-quote-sample.png

The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.

The element is rendering correctly with the exception of the background image, it just won't show up.

CSS Code:
Code:

#block_quote{
   float:left;
   width:400px;
   background:#f7f7f7;
   background-image:url(images/quote-top.png) left top no-repeat;
   margin:50px 0 100px 53px;
   border:1px solid #ccc;
}

#block_quote p{
   font:italic 14px segoe ui, arial, sans-serif;
   color:#5f5f5f;
   line-height:1.4em;
   margin:0;
   padding:20px 15px 20px 60px;
}

Any ideas why the image isn't rendering?

Thanks

Hi there,

I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right.

Code:

<font color='white'><font size='1' face=verdana size=1>

I couldn't find the equivalent of this in CSS

This is my last experiment but it doesn't seem to work either

Code:

fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}

Thanks

I have a dev server Fedora 7 LAMP setup. I have a simple css tag for font size 1.2em. It looks fine. When I push it up to production (unknown server) at GO Daddy the font is HUGE.

I am sure the code is the same. If I view it in Firebug all looks well.

There are also a couple of other strange things like margins being off a couple of pixels here and there.

My question is do different versions of Linux or maybe Apache cause CSS to render differently?

Hi folks

Hoping a CSS expert out there might be able to assist.

I am relatively new to css and have produced a site with fluid css to render on windows and mac at 800x600 and 1024x768.

The site looks fine in IE (5.5, 6 & 7), Firefox & Navigator.

In Opera, it is fine at 800x600, but does not render properly at 1024x768

Also, I have tested the site with browsershots and it doesn't appear to render properly on mac / safari.

I am guessing it is something to do with #text ? Do I need to clear: or something like that?

If you can help, I would be grateful.

Thanks in advance
Sol

www. waihekemagicmassage.com
And: /magic.css

So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0,


How do you get a simple tag like

body {
font-size:small;
}

to be equal in all browsers?

Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way?

By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it.

It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering.

B

I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<div style="background-color: red;"><input type="radio" id="radio"></div>
</body>
</html>

Viewing this simple test page in a broswer shows that IE and Mozilla both vertically align the radio button differently within its "box" as well as giving it a different number of pixels of padding and/or margin on all 4 sides.

Are there any tricks to getting consistency?

Hi All,

Developed a weird issue in FF and IE8 and am not sure what to do with it.

I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it?

I took a screen shot in IE, but the have happens in FF.



Anyone any ides?

People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly.
I'm using "em" instead of pixels when setting font sizes in CSS.
The site has fixed length and width, do I HAVE to allow it to resize itself?

Please help!

I've got two rounded boxes one is contained in the other. If the innerbox grows, the outer box should grow with it. Firefox does a great job and grows with it but IE7 doesn't grow, any help would be greatly appreciated.

here's the CSS i've used for IE:
Code:

/* first rounded box */
/* images are set in the index.php */
 /* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
	width: 100%;
	height: 14px;
	font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; background-color: #37a5f0;} */
.rbroundbox { position: absolute; top: 15px; width: 800px; margin: 5em 0 0 2em; background-color: #37a5f0; } 
.rbcontent  { margin: 0 14px; min-height: 570px; height: 100%; }
/* EOF first rounded box */

/* second rounded box */
/* images are set in the index.php */
/* height and width details */
.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
	width: 100%;
	height: 24px;
	font-size: 1px;
}
/*.rbroundbox { width: 60em; margin: auto; }*/
.rbroundbox2 { position: absolute; top: 5px; width: 577px; margin: 9.5em 0 0 12em; background-color: #9cd5f0;} 
.rbcontent2  { margin: 0 14px; min-height: 375px; }
/* EOF second rounded box */

here's the html i've used:
Code:

<body>
<div class="rbroundbox">
    <div class="rbtop"><div></div></div>
    <div class="rbcontent">
      <div class="rbroundbox2">
            <div class="rbtop2"><div></div></div>
            <div class="rbcontent2">
               <p><?=$content?></p>
            </div><!-- /rbcontent2 -->
      		<div class="rbbot2"><div></div></div>
      </div><!-- /rbroundbox2 -->      
    </div><!-- /rbcontent -->
    <div class="rbbot"><div></div></div>
</div>
<!-- /rbroundbox -->

</body>

Hi,

Im trying to code a small portfolio page but im having trouble with the sizing of one of the sections.

Here is my page:
http://www.zombiemod.com/blog/?cat=1#all

Here is my code for the div:
Code:

#container div { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }

How do I make the Div display this size correctly?

hi, someone using foxfire keeps saying the my font is really really tiny, I have my css file like: Code:

body { background: #FFFFFF;
/* for internet explorer */
scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #494969; scrollbar-arrow-color: #494969; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #494969; 
margin: 0px; padding: 0px; border: 0px; border-top: 1px solid #8E9397; border-left: 1px solid #8E9397; font-color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 8pt; text-align: left; }

a:link,a:active,a:visited { color: #494969; text-decoration: none }
a:hover { text-decoration: underline; color: #494969; position: relative; top: -1px; left: -1px; }
hr { background: transparent; color: #494969; height: 1px; border-width: 0px; }
fieldset { margin: 0; padding: 1px; border: 1px solid #494969; }
legend { margin: 0; padding: 7px; color: #494969; background: transparent; font-weight: bold; }
img { border: 0px; }
table { background: transparent; }
tr { background: transparent; }
td { background: transparent; color: #494969; font-family: Verdana,Arial,Helvetica; font-size: 70%; }
input, textarea, select { color: #494969; font: normal 11px Verdana, Arial, Helvetica, sans-serif; background: transparent; border: 1px solid #494969; border-style: inset; text-align: center; text-indent: 2px; }

form { margin: 0px; padding: 0px; }

any idea on whats wrong? and I would of changed the % to an actual value but I wanted to make it so people can control the size of the font to lager or smaller


here is a preview with that css file in use : http://www.dbznetwork.net/

Whats the best way to fix font size?

I use CSS. The font size seems to stay fix on IE but not on Mozilla and Netscape.

Also I notice when I use adgui font it stay fix no matter in what browser and no matter at what text view. Why is that. Are there more of this kinda fonts?

Bottom line, whats the best way to fix the size of fonts regardless of browser and at what text view.

Thanks for you help
Liz