CSS - New Line Breaks My Code...

Like I said in a previous post, I'm taking over design of a project that was abandoned. I'm nearly complete, except my site won't show in IE. I found this line of code to be the reasoning, and I cannot for the life of me figure out what this line is attempting to do. I can't parse it. This might be in the wrong forum section, I'm not entirely sure.

Code:

<div style="z-index: 2;" class="yui-module yui-overlay yui-tt" id="preview-tooltip-nws"><div class="bd"></div></div><div style="z-index: 2;" class="yui-module yui-overlay yui-tt" id="preview-tooltip-ws"><div class="bd"></div></div><iframe style="position: absolute; visibility: visible; width: 10em; height: 10em; top: -134px; left: -134px; border-width: 0pt;" id="_yuiResizeMonitor" src="data:text/html;charset=utf-8,%3Chtml%3E%3Chead%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3Ewindow.onresize%3Dfunction%28%29%  7Bwindow.parent.YAHOO.widget.Module.textResizeEvent.fire%28%29%3B%7D%3C%2Fscript%3E%3C%2Fhead%3E%3Cb  ody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"></iframe>

Greetings,

I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help!

li
{
list-style-type: none;
background: url(../images/bullet.gif) no-repeat left;
padding: 0 0 0 10px;
}

I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks!

Greetings,

I have a class called "header" and I am trying to give it a touch of extra space between it and the next line.

All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class.

Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer?

Thanks in advance!

I've been working on putting a css/js text navigation together which thus far has seemed to work as intended on a PC. This morning when I checked it on a mac, it broke down.

Technically it breaks down gracefully I suppose... All links are present and the nav is displayed fully expanded. The problem is that this nav is going to have hundreds of links, and having it fully expanded just isn't practical.

If anyone could take a minute to look at my css & js to see if there's something simple that I'm missing, it'd be great.

You can look at my example page he
http://www.whitesagemedia.com/cssnav.html

All css & js is included in the ssource - no attachements.

Thank you, thank you, thank you, to anyone who can help me out.

-Chet

Hi:

I have a MySQL/PHP generated form letter which gets printed and mailed.

I have extablished a CSS font (class?) with a "page-break after" parameter as shown he
PHP Code:
 h4 { font-family: Arial, Sans-serif; font-size: 14px;  font-weight: 500;  
   text-align: left; page-break-after: always;} 




This works great on a PC running IE. However, On a Mac, running OSX, the page breaks are entirely ignored and it is printed as a single long page.

I have tried using other Browsers (Opera, Netscape, and Safari) and they all heve the same problem.

Does anyone have a suggestion?

Thanks

Sean

Ok people, I have a page that contains 2 tables, one beneath the other...

The table at the top can vary in height, but the table at the bottom is of fixed height...

What I want to do is put some sort of "page break" in, so that the second table is always printed on a second piece of paper...

Any ideas anyone?

I have been pulling my hair out on this one because for the life of me I cannot make it work.

Here is my page:

www.nova-dataonline.com

Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image.

Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding

here is the relevant markup:

PHP Code:
<div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
    </div> 





and css:

Code:

.featured{
 visibility:visible;
 width:410px;
 height:350px;
 position:absolute;
 top:250px;
 left:340px;
 border:1px solid #999999;
 border-left:none;
 background-repeat:no-repeat;
 background-position:center;
 background-image:url(images/message/feat.jpg);
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 font-style:normal;
 padding:102px 27px 29px 29px; 
}

#feat_1{visibility:hidden;}

and javascript (if it is even relevant to the problem):

PHP Code:
<script language="javascript" type="text/javascript">
<!--
function toggleDiv(id,flag) 
{
    if (flag == "1")
    {
        if (document.layers) document.layers[''+id+''].visibility = "show"
        else if (document.all) document.all[''+id+''].style.visibility = "visible"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
    }
    
    if (flag == "0")
    {
        if (document.layers) document.layers[''+id+''].visibility = "hide"
        else if (document.all) document.all[''+id+''].style.visibility = "hidden"
        else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
    }
}
-->
</script> 





any idea?

The following is how I have always done my navigation. But in IE7 when I zoom above 100% the links seem to squash up and the hit area move away from the link! You can see this at www.stephaniedubois.co.uk What can I do to stop this? Thanks

div id="topnavbar" class="navTextTop">

<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">GALLERIES</a></li>
<li><a href="exhibit.html">EXHIBIT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>

CSS

#topnavbar {
text-align: center;
position: relative;
top: -25px;
margin: 0px;
padding: 0px;


}


#topnavbar li {
display: inline;
}

#topnavbar ul {
list-style:none;

}

.navTextTop a:link, .navTextTop a:visited {
font:11px/20px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration:none;
letter-spacing: 0.13em;
padding-left: 10px;
padding-right: 10px;
}


.navTextTop a:hover {
color: #000000;
text-decoration:underline;
}

Hi,

This is the page i constructed using CSS.
http://81.137.250.65/champs/main.html

As you can see at the top of the page, when you hover links eg "about" , "booking" a drop down menu appears.
This drop down menu calls a Javascript file which is using a stylesheet. "Style.css" for the formatting of the drop down menu.

My colleague gave me some ASP.net code for the login form, as in the sample URL above the login form is not functional.
As soon as i enter the asp.net code, all the formatting for the Drop Down menu breaks completely. The positioning, coloring etc is all lost. The menu appears at the bottom of the page, and the hyperlinks are all displayed as tradional blue underlined links.
The page itself still appears fine, and doesnt seem to break.
So the asp.net code is not affecting the css in the page itself, but the drop down menu

I dont know if this is a asp.net problem or a CSS problem. My guess is that its the way the CSS for the drop down menu i setup?

Ive only been doing CSS for about 6 weeks, so you will notice the code is not the neatest. I am open to constructive criticism.

If anyone can help with this issue, i would appreciate it.

Thank you

eemo

Hi everyone,

I am stumped at why I'm having this problem in FF only but I'd appreciate any input as to why it's happening.

Take a look at www.spotabusiness.com in FF and see how there is a huge whitespace above the content regardless of what links you click.

It looks fine in IE6 and 7.

Thanks

Can anyone give me a hint as to why the CSS drop-down menu on this page breaks in IE7: http://www.mediamogulsweb.com/

I've looked at it for while and I'm not getting anywhere. Thanks.

I have a 2 column layout using a left float which breaks in IE, sending the right column way down the page. It works perfectly in Firefox. I've been staring at it for days, and can't grok what I'm doing wrong.

Please help!

Code:

body {
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
#container {
	background-image: url(images/background.gif);
	background-repeat: repeat-y;
    width:700px;
	margin: 0 auto;
	margin-top: 10px;
}
#header {
    background-color:#FCF6EA;

}
#content {
	background-color: #FCF6EA;
	width:497px; 
	float: left;
	padding-left: 0px;
	border-style: solid;
	border-color: #F8CA52;
	border-left-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-top-width: 0px;
	padding-top: 5px;
}
#sidenav {
	background-image: url(images/navback.gif);
	margin-left: 500px;
	width: 200px;
}
#container > #sidenav {
	width:203px;
}

#footer {
    background-color: #ffffff;
	background-image: url(images/footer.gif);
	clear: both;
}
h1	{font-size: small;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
}
a:link {
	color: #663333;
}
a:visited {
	color: #000000;
}

B.

See the thin box on the right displaying forum posts in the below. I'm only concerned with the thin boxes width being to the edge of the page in IE and not in firefox. I realise it's also positioned wrongly in IE but I'll come to that later...

This page works


This page doesn't

In the one that works I'm outputting:

Code:

<div id="latestposts">
            <a class='sidelist' href='/board'>Discussion Forum</a>
            <ul>
                <li id='sidelist'>
                    <a class='sidelist' href='board'>Djembefaso Gigs coming up in Dublin</a>
                    <p class='sidelisttext'>SmallText</p></li>
                <li id='sidelist'><a class='sidelist' href='board'>Recordings anybody!!</a><p class='sidelisttext'>SmallText</p></li>

In the broken one I'm outputting:

Code:

          <ul>
               <li id='sidelist'>
                 <a class='sidelist' href='board'>Djembefaso Gigs coming up in Dublin</a>
                <p class='sidelisttext'>Djembefaso play at the Camden </p>
            </li>

The differnce in the code is that in the broken one I am outputting "Djembefaso play at the camden" from a php variable $Smalltext (I took off the dollar sign and the formatting works). This problem only occurs in IE. Can anybody help I'm stumped...
Thanks

Hello.

Look at the differences between the borders around photos he

http://www.fusionfox.com/2006/02/tinker_toys.html

In Firefox and in IE. My CSS looks like this:


.imageleft {
float:left;
margin:10px 10px 10px 0;
background:#FFFFFF;
padding:3px;
border:1px dotted #999999;
}



Why does the image border disappear in IE? This is killing me. Any help would be greatly appreciated. Thanks!