CSS - Css/js Nav Breaks On Mac -- Please Help!

I have coded my css file to display a border and change the background color of any text I put inside of <p> tags. It seems to work fine until I have to create a new line using <br> then it ignores everything after the <br> and strips the styling.

My css is attached below:
Quote:
p.doubleSpaced { line-height: 200%; text-align: left; background-color: #eeeeee; border: #dddddd 2px solid; padding: 10px 15px; }


My page can be viewed he http://dev.asbco.com/products/insti...al-recrational/

Thanks for the help!

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.

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

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

Not sure if the is in the right forum!?

Basically i have a page that is only ever going to be displayed in IE (using the webbrowser control within a programme). On this page i would like to use 'page-break-after: avoid' but as this is not implemented i am try to go about it differently.

Is it possible to do something along the lines of this...

Quote:
<div style="page-break-after: expression(are we in the bottom eigth of the page?'always':'auto')">


Can this work, oh and i also need help with the bit in bold and italics.

Many Thanks!

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

Like on this page, under each of the photos: http://www.sdtars.com/development/events/camp.php

What causes the text to appear like:
Quote:
Originally Posted by In IE
Officers
discuss
TAR
Days
at an
executive
board
meeting

When i use the css to position an table absoultly it "breaks apart" the table.

I tried placing the style in the <table> tag and in a <div> wrapped around the table. If anyone knows how to fix this let me know.

I just tried it in internet explorer and it looks good. so it is only breaking apart in firefox

Here is the css class I am using.

.nav {
position: absolute;
top: 70px;
left: 770px;
z-index: 5;
}

Thanks for any help

Hi all,

I'm brand new to this forum, with some intermediate CSS skills. I've trimmed down my website in order to solve a persistent issue plaguing my layout. This issue involves what happens when using browser zoom: columns widths are recalculated incorrectly, and the right background is marred with a vertical line. Additionally, the main nav buttons fluctuate in size too. Extra space is visible to the right of the nav bar.

I'm assuming this is happening because I've used exact pixel dimensions. I'm willing to change that, as long as the basic appearance of the layout can be achieved some other way.

My code is fairly long, and several key images are critical to layout. I think the best way to share this would be through a link...Any help is appreciated, and I'd be very grateful! Thanks in advance.

EDIT: Thanks to E-Oreo for the link tip.

stuartletizia.com SLASH skinned SLASH index.html

EDIT: I'm working in 1680 x 1050 on Windows 7, testing with Firefox 6.0.2, Chrome 13.0.782.220, IE 8, and Safari 5.1.

I am a bit of a loss as to why the menu on this page http://www.laurieannre.com/welcome.asp looks great on IE but not in other browsers. If it is not too much trouble and someone can be of some assistance I'd appreciate it. Tom

this is so strange,

http://www.spunlogic.net/GMAAC/index.htm

this site works fine on PC browsers but totally messes up on Mac Explorer.

can anybody help me? this is a probono project.

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!