|
CSS - <p> Style Doesnt Match Up In Ie
I have read a few posts but could not find one that was similar. I have a center column where I will be putting text. Here is structure for the center column.
#center { margin-left: 160px; margin-right: 205px; margin-top:0px; padding:0px 0px 0px 0px; background-color:transparent; } When I put text inside it, and use the <p> tags, p { margin: 0px 12px 0px 2px; font-size:small; font-family:Veranda; font-color:#000000; padding-bottom:10px; pading-top:20px; } in netscape and firefox the margin is perfect on the left. In IE, however, the margin of the first paragraph is about 2pixels from the left. I know there is something in the box model I am not taking into consideration. any info would be great thanks Similar TutorialsI am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hi, I have one site, running two scrpts, and I just can't get one CSS to match the other. I'm nearly there, but I just need to make the body copy (main page text) the same in each. I am trying to make this (While oxygen is vital to every human...) the same as this (Christopher Manton is a nutritionally-oriented natural ...) Please help. What should I change to make them match? Thanks Hi. The main gallery image is pushed down from the top of the logo on the page below: http://zombiemod.com/rm/nina2/main.php?g2_itemId=14 I want to move this block on the right up. I believe this uses the main-image-container div as shown below, but when I put a negative top margin on this div it doesnt move. The is the CSS I tried for the main-image-container div: Code: margin-top: -70px; This is the HTML: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controlsx">
<ul id="control-buttonsx">
<li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
<li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
<li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
</ul>
</div>
Why didnt my negative top margin work? Hey, I have created a site but here is the 1 problem. My CSS doesnt work in firefox. But the site looks perfect in ie; does anyone know why this could happen. Thanks. I use font-family: etc...... color and bgcolor. Thanks. <ul> doesnt work in IE properly? I have problem with IE7 and < code: html: <ul> <li><a href="A.html">A</a></li> <li><a href="B.html">B</a></li> <li><a href="C.html">C</a></li> </ul> If I open site with IE7 pages B.html and C.html works fine, whereas A.html loose its css for navigation (ul a:link etc..) any ideas? code for css: #containerNavigation { margin: 0; float: left; width: 100%; background: #990000; } #navigationHorizontal { zoom: 1; width: 750px; margin: auto; padding-right: 0; height: 35px; } #navigationHorizontal ul { float: right; padding: 0; margin: 0; list-style: none; width: 749px; } #navigationHorizontal li { padding-right: 0; margin: 0; display: inline; } #navigationHorizontal li a { float: left; color: white; text-decoration: none; text-align: center; background-color: #990000; line-height: 35px; margin: 0 0 0 0; padding: 0 25px 0 28px; font-size: 1.2em; } #navigationHorizontal li a:hover { color: #FFF; text-decoration: underline; } i know ie sux but, i nearly fixed the columns height problem but there is still a problem ,, site : http://www.bekirhoca.com/index2.asp >> it looks nearly fine (instead of the image over the menu) when i add some content to the columns, height expands normally . But in firefox it doesn't seem normal because of the -- #wrapper {float:left} -- tag. When i remove it firefox acts normally but ie dont , when i add it reverse. So is there an hack to make firefox not to see that float? or i dont know where i did the mistake !!???!! and there is another problem ,, at 1280x1024 screen resolution the inner content expands, i want to fit it inside where it is between the right and the left cols. and and and why the right column isnt fit in ff as in ie?? you can check the site's top image 's right corner and see what i mean > http://www.bekirhoca.com/index2.asp ,, its a little bit longer than as seen in ie Hey gang, My suckerfish menu wonk work properly in ie5.5 and ie6 but works fine in all the others... the problem is that if i hover over main link that drop down menu will appear but then wont stay there when i hover the mouse over the submenu. i removed all the content from below the menu and suddenly it works, but my site needs content! Has anyone had this problem before??? #navi { width: auto; background: url(images/navi01.jpg) repeat-x top left; } #navi, #navi ul { /* all lists */ padding: 0px 0px 0px 26px; margin: 0; list-style: none; height: 29px; } #navi a { font-weight: bold; margin: 8px 0px 0px 0px; color: #ffffff; display: block; width: auto; padding: 0px; text-decoration: none; } #navi li { float: left; width: auto; padding: 0px 26px 0px 26px; } #navi li ul { position: absolute; width: 160px; left: -999em; padding: 7px 0px 0px 0px; margin: 0px 0px 0px -17px; } #navi li ul li { width: 160px; height: auto; padding: 0px 0px 0px 0px; border-top: 1px solid #ffffff; border-bottom: 1px solid #cfcfcf; border-left: 1px solid #ffffff; border-right: 1px solid #cfcfcf; overflow: visible; } #navi li ul a { background-color: #f2f2f2; color: #1989d1; padding: 3px 16px 4px 16px; margin: 0px; } #navi li.heading { border-top: 1px solid #7fa7bf; border-bottom: 1px solid #67889b; border-left: 1px solid #7fa7bf; border-right: 1px solid #67889b; } #navi a.heading { background-color: #799eb5; color: #ffffff; padding: 3px 16px 4px 16px; } #navi li:hover ul, #navi li.sfhover ul { /* lists nested under hovered list items */ left: auto; } <script type="text/javascript"> <!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("navi").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]> </script> </head> <body> <div id="border"> <div id="container"> <div id="content_left"> <div id="header"><div id="header01"></div></div> <ul id="navi"> <li> <div><a href="">About Us</a></div> <ul> <li><a href="">History</a></li> <li><a href="">Staff</a></li> <li><a href="">Employment</a></li> </ul> </li> <li> <div><a href="">Products and Services</a></div> <ul> <li class="heading"><a href="" class="heading">Support Services</a></li> <li><a href="">Customer Support</a></li> <li><a href="">Advanced Support</a></li> <li class="heading"><a href="" class="heading">Professional Services</a></li> <li><a href="">Engineering Services</a></li> <li><a href="">Project Managemant</a></li> <li><a href="">Software Development</a></li> <li><a href="">Consulting</a></li> <li class="heading"><a href="" class="heading">Solutions</a></li> <li><a href="">Voice over IP (VOIP)</a></li> <li><a href="">Information Lifecycle Management (ILM)</a></li> <li class="heading"><a href="" class="heading">Procurement Services</a></li> </ul> </li> <li><div><a href="">Contact Us</a></div></li> <li><div><a href="">Links</a></div></li> <li><div><a href="">News</a></div></li> </ul> hmm why would my padding show up in FF but not IE html Code: <div id="nav">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
</ul>
</div>
css Code: #nav{
background-color:#999999;
width:1000px;
height:50px;
margin-left:auto;
margin-right:auto;
}
#nav ul{
margin:0px;
padding:0px;
}
#nav li{
display:inline;
padding:0px;
margin:0px;
}
#nav a{
background-color:#FF0000;
padding-bottom:20px;
padding-top:20px;
}
Page looks fine on my screen but when i resize window-divs overlap or in some cases just text runs on top of other divs messed up. Do I need to set all my width-height values and margins to auto? Margins in my wrap are auto. What are common causes of this? heres my css-its kinda a potpourri Code: #wrap {width:70%;
min-width:700px;
margin-left: auto;
margin-right: auto;
}
#headertop {background:url(gradient.png);
height:40px;
}
#header {background:url(black.png);
height:70px;
}
.title {float:left;
margin:5px;
}
#menu {float:right;
margin-top:30px;
margin-right:20px;}
.link {float:left;
margin-top:8px;
margin-left:5px;
background:url(gradient.png);
border-right:1px solid black;
height:auto;
width:auto;
padding:5px;
text-align:center;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:0px;
border-top:1px solid grey;
}
#floatright {float:right;
width:400px;
margin:0px;
padding-left:10px;
border-left:2px double grey;
height:350px;
background:#000000;
}
.nav {float:left;
height:400px;
padding-right:10px;
padding-top:50px;
}
.txt {padding-left:10px;}
#bottom{background:#000000;
height:10px;
margin-top:0px;
border:2px solid black;}
#content {
border:1px solid grey;
background:#fffbe9;
}
.floatl{float:left;}
#testarea {
padding-top:25px;
padding:10px;
min-height:330px;
background:#ffffff;
border-left:1px solid grey;
}
#testareaalt {
width:auto;
padding-top:25px;
padding:10px;
min-height:330px;
height:auto;
background:#000000;
border-left:1px solid grey;
}
.area {background:url(background.png);
height:30px;
}
.button {width:100px;
height:25px;
border:1px solid black;
background:grey;
padding:8px;
display:block;
}
.top {background:000000;
height:15px;
}
h3 {font-family:Sans-serif;
background:url(gradient.png);
padding:5px;
}
h4 {font-family:Sans-serif;
background:url(black.png);
padding:5px;
margin:0px;
color:#ffffff;
}
h4.g {font-family:Sans-serif;
background:url(black.png);
padding:5px;
margin:0px;
color:#00af33;
}
p {font-family:verdana;
line-height:15px;
font-size:13px;
padding-left:10px;
padding-right:10px;
color:7d7d7d;}
ul {font-family:verdana;
line-height:15px;
font-size:13px;
padding-left:40px;
padding-right:10px;
color:7d7d7d;}
table {border-collapse:collapse;
padding:5px;
font-family:verdana;
line-height:15px;
font-size:13px;
padding-left:10px;
padding-right:10px;
color:7d7d7d;
}
table.social {border-collapse:collapse;
padding:10px;
margin:5px;
background:url(gradient.png);
}
}
td.alt {background:grey;
}
#textbox {
border:1px solid grey;
background:url(black.png);}
#menutrial {float:right;
margin-right:0px;}
.left {float:left;
margin:10px;
clear:left;}
.container{margin:8px;}
a:link, a:visited {
color: #cc0033;
padding:5px;
text-decoration: none;
font-family:Sans-serif;
}
a:hover, a:active {
/*background-color: #C74350;*/
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 1px #33ff00;
font-family:Sans-serif;
}
#textboxa{
border:1px solid grey;
background:#000000;}
img.alt {margin-left:90px;
margin-right:auto;
width:70%;
border:0px;
}
#right{float:right;}
i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works? Hello, I got a website with a table on it. This is how it looks in firefox 2.0: http://img139.imageshack.us/img139/9822/helpffkr6.jpg And here's how it looks in IE6: http://img111.imageshack.us/img111/9675/helpiehi7.jpg As you can see, where FF do display the table border, IE does not. Here's the simplified table code and the related css code: Table -> Code: <table class="listings" style="width: 100%;"> <tr> <td colspan="2" class="darkRow">Category 1</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 1</td> <td style="width: 70%" class="lightRow">This is thread number 1.</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 2</td> <td style="width: 70%" class="lightRow">This is thread number 2.</td> </tr> </table> CSS code -> Code: <style type="text/css">
table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
.darkRow{
background-color: #4D3D4D;
border-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow{
background-color: #BFACBF;
border-color: #4D3D4D;
color: #4D3D4D;
padding-left: 4px;
}
</style>
It seems as if IE doesnt support borders around a whole row, because when i add this: Code: table.listings td{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention. Does anybody have an idea what i can do about this? thanks in advance. Hi all, thanks on the last post, hope you can help with this too. I'm trying to get an image to display in a box, and repeat all along the box (only a 1 pixel image). But for some reason its not being picked up. my code is: Code:
<body>
<div id="wrap">
<div id="innerwrap">
<div id="holding">
holding
</div>
</div>
</div>
</body>
and the css is this: Code:
#wrap{width:60em;height:43em;background:silver;margin:0 auto;text-align:left; padding-top:.1em;}
#innerwrap{ background-color:gray;margin:.5em;height:42em;}
#holding {background:#3F8BCA url(/img/topgradient.jpg) repeat-x scroll left top;}
I've tried to change the brackets to forward brackets, tried to and ", but nothing works, im sure the spelling etc is correct... any help would be great Kind regards MG is text align restricted to div tags only? and/or block level elements? and if so, how could i get the program names (ICQ, MSN, Yahoo!) to text-align:left..... and the contact info to align right.... do i HAVE to use a float for this? http://defunctgames.com/contactinfo.htm I have created a dropdown menu for my site. The dropdown works great in Firefox, safari and opera but it does not drop down in IE. The menu is displaying ok in IE but when you hover over a tab nothing happens. This is the link http://www.misi.co.uk/2_template.php There are two menus "navigation" which is the bottom category menu in grey and "navigation_blue" - which is the top bue tabs. I have the same problem with both menus. I normally hash around to get IE to function as I wish however only having a mac infront of me its a bit of a pain as I have to ring a friend to check IE for me, if anyone knows of a browser test that allows you to check functions in IE please let me know, I use a couple but only get screen shots so its fine for layout checks but no good at testing drop down menus and the like. Code: /* Categories Bottom MENU */
#navigation {width:985px;height:50px;margin-top:-27px;}
#navigation ul {margin-left: -40px; text-align:center;}
#navigation li {height:21px;float: left; text-align:center;position: relative;background: url(/images/top-tab-lgt.png) no-repeat}
#navigation * {cursor: pointer;}
#navigation li a {text-align:center;width:87px;float:left; color:#333333; font-size:5px; display: block; padding-left:2px;padding-top:2px; text-decoration: none; }
#navigation li a span {float: left; display: block; line-height: 21px; height: 21px; padding: 0 6px 0 1px;}
.os_windows #navigation li a span {padding: 0 0px 0 0px}
#navigation li a {color: #000000; font-size: 11px; font-weight: 100; font-family: Arial, sans-serif; }
#navigation li a:hover {color: white; background-color: #e2e0e1;}
#navigation li {list-style:none;}
#navigation li:hover .navigation_hover,
#navigation li.hover .navigation_hover {visibility: visible;}
#navigation .navigation_hover {
width: auto;
position: absolute;
top: 18px;
left: -40px;
margin: 0px;
display: block;
visibility: hidden;
border-top: 0;
z-index: 4;
}
#navigation .navigation_hover li {float: left}
#navigation .navigation_hover li a {
float: none;
padding: 0 2px;
line-height: 21px;
width: 110px;
background: #e2e0e1;
color: #000000;
border: 0;
}
#navigation .navigation_hover li a:hover {
background: #cc205c;
color: white;
}
/* TOP TABS */
#blue_navigation {height:50px; text-align:right; margin-left: 265px; margin-top:-5px;}
#blue_navigation ul {text-align:right; }
#blue_navigation li {height:40px; float: left; position: relative;list-style:none;background: url(/images/top-tab-blue.png) no-repeat;}
#blue_navigation * {cursor: pointer;}
#blue_navigation li a {width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
#blue_navigation li a span{width:135px; float: left; color:#333333; font-size:10px; display: block; text-align:center;padding-top:5px; text-decoration: none; }
#blue_navigation li {list-style:none;}
#blue_navigation li a:hover {color: #0D7DC7; background: url(/images/top-tab-hblue.png) no-repeat}
#blue_navigation li:hover .blue_navigation_hover,
#blue_navigation li.hover .blue_navigation_hover {visibility: visible;}
.os_windows #blue_navigation li a span {padding: 0 0px 0 0px}
#blue_navigation .blue_navigation_hover {
float: none;
position: absolute;
text-align:left;
width: auto;
left: -40px;
height:21px;
margin-top: 20px;
display: block;
visibility: hidden;
z-index: 4;
}
#blue_navigation .blue_navigation_hover li {float: left}
#blue_navigation .blue_navigation_hover li a {
float: none;
left: -85px;
padding-top: 0px;
line-height: 20px;
color: #7c7c7c;
border: 0;
}
I am baffled by what seems like a simple task which I can't seem to find the solution to. I've two columns (#top_left, #top_right) inside a containing div (#top_container). I want both columns to be the same height (100%). So if the column on the right has more content, the column on the left will stretch to match the same height. If I set a fixed height on the containing div (#top_container), it fixes the issue, since at this point my declaration of height:100% on the two columns actually knows what it is supposed to be 100% of. But then I run into overflow issues if the content goes over fixed height and when I try min-height, the columns fail to stretch once more. Here is my code: Code:
<style type="text/css">
#top_container {width:760px;}
#top_left {float:left; height:100%; width:200px;}
#top_right {float:left; height:100%; width:560px;}
</style>
<div id="top_container">
<div id="top_left">Content</div>
<div id="top_right">Content</div>
<br clear="all" />
</div>
I've slimmed down the code and cut out non relevant pieces like font styling, colors, and other non pertinent sections. Thanks for taking the time to read my question. I have a container that has a bunch of stuff in it. In IE the container grows (I know it shouldn't) with the content. FF the content doesn't. I want to use the same container on each page in my site, but each page will have different amounts of content making the page longer or shorter. I need the container to match the contents, and I would like to do it without making duplicates of the container in the CSS and changing only the height. For an example check out warrenpersowich.com Look at the home page and the Seminars page. See how the content is differen, but the container is the same. Thanks, Brad I have a full page menu which resizes. eg item1 | item2 | item3 | item4 | item5 | item6 Which resizes depening on the window size. However if you shrink the window X ways, it does the following item1 | item2 | item3 | item4 | item5 | item6 how can I stop it wrapping the items to new lines heres my code. Code:
#menu2 {
display : inline;
white-space : nowrap;
width: 100%;
margin: 1em 0;
padding: 0px 0.5em;
background: #eee none;
}
#menu2 ul {
display : inline;
white-space : nowrap;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu2 li {
display : inline;
white-space : nowrap;
margin: 0;
padding: 0;
float: left;
}
#menu2 li {
white-space : nowrap;
display : inline;
width: 24%;
text-align: center;
}
#menu2 a {
float:left;
display:block;
margin: 2px 0 0;
text-decoration: none;
padding-right: 0.4em;
padding-left: 0.65em;
}
and Code: <div id="menu2">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</div>
ok so I have a menu done via CSS and initially I set up a left border on it so it shows up like this: | menu 1 | menu 2 | menu 3 Now with the help of JQuery I am trying to get rid of the | on the menu 1.. Jquery is applying the class to the correct a selector but the border is not being removed? if I change the css to "border: 1px solid black" it applies the border to the whole of menu 1 but the left border still stays WHITE? the css class is: .removeBorder { border:0; } the menu CSS is: Code:
ul.navigation-1 li a,
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
{ padding:4px 10px; display:block;text-decoration:none; border-left:1px solid #ffffff;color:#ffffff; width:100%; height:13px; }
If i remove the border-left attribute from here, the border goes away.. and via Jquery I am targetting the A.. so what is the problem? Just a FYI: html code: Code: <div id="left-menu"> <ul class="navigation-1"> <li><a class="removeBorder" href="">Products</a><ul class="navigation-2"><li><a href="">A-Z List</a></li><li><a href=""> Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ??? Code:
a:link {
color: #333333;
font-size: 11px;
}
a:hover {
color: #333333;
font-size: 11px;
}
a:visited {
color: #333333;
font-size: 11px;
}
|
|||||||