|
CSS - Changing Color To Red For Negative Numbers
Hi,
How to change the background color of textbox in css, so that negative numbers can be shown in red color I have multiple textbox in my asp page, which gets values from database. So there is a negative value shown, I want to highlight that in red color. How to achieve this? Thank you Similar TutorialsGreetings I hope the title wasn't too confusing. If not this is sure to be. What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover. Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text). How can I achieve this? Here is some code to (hopefully) clarify: Code: #lower {
width: 765px;
float: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#lower ul {
width: 775px;
list-style-type: none;
margin: 0;
padding: 0px;
}
#lower ul li {
font-family: "Trebuchet MS";
font-size: 14px;
width: 250px;
float: left;
}
#lower ul li a {
text-decoration: none;
display: block;
height: 125px;
color: #262626;
}
#lower ul li a:hover {
background-color: #5B8C3E;
color: #D9D9D9;
}
#lower h2 {
font-family: "Trebuchet MS";
font-size: 16px;
margin: 0px;
color: #262626;
}
#lower a h2:hover {
color: #D9CE3F;
}
As is the h2 only changes when it is directly hovered, not the the li. Thanks in advance for your help. hi, iam having a div tag in that div i have table.. <div style="width:658;height:265px; overflow:auto;" > <table> </table> </div> now i need to change the color of scroll bar of this div tag. i tried with this the css .myScrollBar { scrollbar-face-color: #FF0000; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #00FF00; scrollbar-3dlight-color: #FF00FF; scrollbar-darkshadow-color: #00FFFF; scrollbar-track-color: #FFFF00; scrollbar-arrow-color: #000000;} <div style="width:658;height:265px; overflow:auto;" id='myScrollBar'> but its not working.. Regards, Ok I simply cannot figure this one out. All I'm trying to do is change the font color so that the text like "Choose a Username" is not black but white. Here is the link to the page http://www.technicalhypnotherapy.com/wordpress/?page_id=128 This is my CSS. I think the more relevant tags are the last ones. Code: /*
Theme Name: Pixel
Theme URI: http://85ideas.com/public-releases/wordpress-theme-pixel/
Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize. Enjoy!
Author: Sam @ 85ideas.com
Author URI: http://85ideas.com/
Version: 2.0.2
Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar, sticky-post
.
Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>.
.
*/
/* Defaults */
* {
margin: 0;
padding: 0;
}
:focus {
outline:0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 10px 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
}
hr {
color: #333;
border: 1px solid #121212;
}
pre {
height: auto;
overflow-x:scroll;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
dd {
padding-left: 15px;
}
p {
font-size: 9pt;
}
a {
color: #6598b8;
text-decoration: none;
}
a:hover {
color: #222;
text-decoration: underline;
}
a img {
border: none;
}
blockquote {
background: #070707;
border: 1px solid #060606;
padding: 5px 15px;
margin: 10px 10px 5px 15px;
font-style: italic;
color: #fff;
}
code {
color: #3366cc;
font-style: italic;
}
strong {
font-size: 110%;
}
body {
text-align: center;
margin: 0;
padding: 0 0 15px 0;
font-family: trebuchet ms, arial, helvetica, sans-serif;
background: #000 url(images/bgbody.jpg) top center no-repeat;
color: #eee;
}
/* Header and wrapper */
#wrapper {
margin: 0 auto;
width: 960px;
text-align: left;
padding: 0;
}
#header {
padding: 0;
margin: 0;
height: 80px;
text-shadow: 0 0 4px #555;
}
#header #topright {
text-align: right;
float: right;
width: 930px;
margin: 3px 0 0 0;
}
#header #topright ul {
list-style: none;
padding: 0;
margin: 0;
}
#header #topright li {
display: inline;
}
#header #topright li a {
color: #fff;
font-size: 9pt;
padding: 0 0 0 25px;
text-transform: lowercase;
}
#header #topright li a:hover {
color: #ccc;
text-decoration: none;
}
#header #logo {
margin: 0;
padding: 0;
}
#header h1 {
padding: 0;
margin: 0;
}
#header h1 a {
color: #fff;
font-size: 17pt;
text-decoration: none;
}
#header h1 a:hover {
color: #eee;
text-decoration: none;
}
#header span {
padding: 0;
color: #eee;
font-size: 10pt;
}
/* Menu */
#catnav {
margin: 20px 0 0 0;
padding: 0;
clear: both;
height: 44px;
width: 960px;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
display: block;
line-height: 44px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 10pt;
color: #fff;
letter-spacing: -1px;
}
#nav li a:hover {
color: #6598b8;
text-decoration: none;
display: block;
}
#nav li ul {
list-style: none;
position: absolute;
width: 150px;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li li {
float: left;
margin: 0;
padding: 0;
width: 150px;
}
#nav li li a {
width: 150px;
height: 24px;
line-height: 24px;
color: #fff;
border-top: 1px solid #131f27;
background: #040404;
margin: 0;
padding: 5px 20px 5px 15px;
}
#nav li li a:hover {
border-top: 1px solid #131f27;
background: #000;
padding: 5px 20px 5px 15px;
}
#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
position: static;
}
#toprss {
float: right;
margin: 10px 15px 0 0;
display: inline;
width: 65px;
line-height: 41px;
}
/* Top Content */
#main {
margin: 5px 15px 0 15px;
clear: both;
width: 930px;
padding-bottom: 5px;
}
#contentwrapper {
float:left;
width: 560px;
margin: 0 0 15px 0;
padding: 0;
}
#contentwrapper2 {
float:left;
width: 900px; margin: 0 0 15px 0;
padding: 0;
}
#contentwrapper .pageTitle, #contentwrapper2 .pageTitle {
margin: 15px 0 10px 0;
font-size: 14pt;
letter-spacing: -1px;
color: #fff;
font-weight: normal;
background: url(images/bg-trans.png) repeat;
padding: 5px;
}
.topPost {
margin: 0;
padding: 0;
font-size: 9pt;
}
.topPost h2.topTitle a {
font-size: 15pt;
font-weight: normal;
color: #fff;
letter-spacing: -2px;
}
.topPost h2.topTitle a:hover {
text-decoration: none;
color: #abd1ea;
}
.topPost p.topMeta {
padding: 0;
margin: -10px 0 0 0;
font-size: 9pt;
color: #cdcdcd;
}
.topPost p.topMeta a {
text-decoration: none;
color: #fff;
}
.topPost p.topMeta a:hover {
color: #ccc;
text-decoration: underline;
}
.topPost div.topContent {
font-size: 9pt;
color: #efefef;
margin: 8px 0;
}
.topPost div.topContent p {
font-size: 1.05em;
line-height: 1.6em;
}
.topPost div.topContent a {
text-decoration: underline;
color: #fff;
}
.topPost div.topContent a:hover {
text-decoration: underline;
color: #ff9933;
}
.topPost div.topContent ul, .topPost div.topContent ol {
padding: 0 0 0 30px;
}
.topPost div.topContent ul li, .topPost div.topContent ol li {
font-size: 1.05em;
color: #eee;
}
.topPost span.topComments, .topPost span.topMore, .topPost span.topTags {
font-size: 9pt;
font-style: italic;
background: url(images/bg-trans.png) repeat;
padding: 8px 10px;
margin-right: 5px;
line-height: 27pt;
color: #fff;
border: 1px solid #111;
}
.topPost span.linkpages {
font-size: 9pt;
font-style: italic;
color: #fff;
margin-bottom: 10px; display:block;
}
.topPost span.linkpages a:hover {
color: #ddd;
}
.topPost span.topComments:hover, .topPost span.topMo hover, .topPost span.topTags:hover {
background: #040404;
}
.topPost span.topComments a {
color: #fff;
background: url(images/comments.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topMore a {
color: #fff;
background: url(images/more.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topTags em {
background: url(images/tags.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
color: #0a0a0a;
}
.topPost span.topTags a {
color: #fff;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover {
color: #fff;
text-decoration: underline;
}
#nextprevious {
margin: 10px 0 5px 0;
}
#nextprevious a {
color: #eee;
text-transform: lowercase;
border: 1px solid #111;
padding: 5px 8px;
font-size: 10pt;
line-height: 1.4em;
}
#nextprevious a:hover {
color: #fff;
}
/* Comments */
#comments {
margin-bottom: 10px;
margin-top: 15px;
background: #040404;
width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */
border: 1px solid #090909;
padding: 0px 15px 10px 15px;
color: #fff;
}
#comments h3 {
font-size: 10pt;
font-weight: normal;
color: #fff;
margin: 15px 0;
padding: 0;
}
#comments p a {
color: #6598b8;
}
#comments p a:hover {
color: #fff;
}
#comments p {
padding:0;
margin: 7px 0;
}
ul.commentlist, ul.trackback {
list-style-type: none;
margin: 10px 0;
font-size: 9pt;
}
.commentlist li, .trackback li {
margin: 10px 0 15px 0;
padding: 10px;
background: #080808;
border: 1px solid #040404;
list-style-type: none;
}
.commentlist li.alt {
background: #000;
border: 1px solid #020202;
border: none;
margin-top:10px;
}
.commentlist li.cleared {
background: transparent;
border: none;
}
.commentlist a:hover {
color: #eee;
}
.commentlist a.gravatar {
float: left;
margin: 0 15px 10px 0;
width: 60px;
}
.commentlist .commentbody {
margin: 0;
padding: 0;
}
.commentlist .commentbody p a {
text-decoration: underline;
}
.commentlist cite {
font-size: 10pt;
font-style: normal;
color: #ddd;
}
.commentlist small.commentmetadata a {
color: #666;
}
.commentlist p {
color: #dedede;
}
#respond {
clear: both;
margin-top: 15px;
}
textarea#comment {
width: 450px;
background: #fff;
color: #111;
padding: 10px;
}
#comments #submit {
margin: 0;
}
#extrastuff a {color:#999; font-size:0.8em;}
#extrastuff a:hover {color:#6598b8; text-decoration:none;}
#extrastuff #rssleft {float:left; width:250px;}
#extrastuff #trackright {float:right; width:180px; text-align:right;}
/* Welcome section */
#main #welcome {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
background: url(images/bg-trans.png) repeat;
}
#main #welcome h2 {
font-size: 14pt;
font-weight: normal;
color: #fff;
letter-spacing: -2px;
margin: 0 10px;
padding: 10px 0 3px 0;
}
#main #welcome p {
font-size: 9pt;
color: #eee;
margin: 0 10px;
padding: 6px 0;
}
#main #welcome a {
text-decoration: underline;
color: #ff9933;
}
#main #welcome a:hover {
color: #6598b8;
}
#main #welcome form {
margin: -5px 0 0 0;
background: transparent; /* required for IE */
}
#main #welcome #feedbox {
border: 1px solid #ccc;
padding: 2px 1px;
width: 180px;
}
.submitbutton {
margin: -5px 0 0 5px;
background: #010101;
color: #fff;
font-size: 8pt;
padding: 3px 6px;
vertical-align: middle;
border: 1px solid #111;
}
.submitbutton:hover {
cursor: pointer;
background: #050505;
}
/* Sidebars */
#sidebars {
margin: 15px 0 0 0;
float: right;
width: 340px;
color: #eee;
}
#sidebars .sidebarbox {
background: url(images/bg-trans.png) repeat;
padding: 8px 15px;
}
#sidebar_full {
padding: 0;
margin: 0;
}
#sidebar_left {
float: left;
width: 160px;
}
#sidebar_right {
float: right;
width: 160px;
}
#sidebars h2 {
margin: 0;
padding: 0 0 8px 0;
font-weight: normal;
font-size: 11pt;
color: #fff;
letter-spacing: -1px;
}
#sidebars table {
width: 130px;
}
#sidebars ul {
margin: 0;
padding: 0 0 5px 0;
}
#sidebars li {
margin-bottom: 20px;
list-style: none;
font-size: 9pt;
}
#sidebars li ul {
padding: 0;
}
#sidebars ul ul li {
margin: 0;
padding: 2px 2px 2px 16px;
color: #eee;
background: url(images/bullet.gif) left 8px no-repeat;
line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
}
#sidebars a {
display: inline;
color: #eee;
}
#sidebars a:hover {
color: #6598b8;
text-decoration: underline;
}
#sidebars p {
padding: 2px 0;
font-size: 9pt;
color: #eee;
}
#tag_cloud a {
display: inline;
}
#sidebars ul.children li {border-bottom:none;}
#sidebars ul.children {margin-bottom:0;}
/* Before footer */
#morefoot {
background: #000 url(images/bggrad.jpg) top left repeat-x;
border: 1px solid #070707;
padding: 15px;
color: #dfdfdf;
margin: 0 0 10px 0;
}
#morefoot p {
margin: 5px 0;
padding: 5px 0;
}
#morefoot ul {
list-style-type: none;
margin-top: 5px;
}
#morefoot ul li, #morefoot p {
font-size: 9pt;
}
#morefoot a {
text-decoration: underline;
color: #ddd;
}
#morefoot a:hover {
text-decoration: underline;
color: #6598b8;
}
#morefoot h3 {
font-size: 12pt;
font-weight: normal;
color: #dfdfdf;
letter-spacing: -1px;
border-bottom: 1px dotted #444;
margin: 0;
padding: 0 0 2px 0;
}
#morefoot #searchbox {
padding: 1px;
width: 180px;
}
#morefoot .col1 {
float: left;
width: 340px;
}
#morefoot .col2 {
margin: 0 25px;
}
#morefoot .col2, #morefoot .col3 {
float: left;
width: 260px;
}
#morefoot li {
padding-left: 20px;
margin-bottom: 5px;
background: url(images/more.gif) left 2px no-repeat;
line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
}
/* footer*/
#footer {
clear: both;
background: #000;
border: 1px solid #070707;
padding: 15px 15px 10px 15px;
}
#footer p {
font-size: 9pt;
color: #bbb;
padding: 0;
}
#footer a {
color: #bbb;
text-decoration:none;
}
#footer a:hover {
color: #fff;
}
#footerleft {
float: left;
width: 500px;
}
#footerright {
float: right;
width: 300px;
text-align: right;
}
/* Misc */
.highlight {
color: #222;
font-weight: bold;
}
.cleared {
margin: 0;
padding: 0;
clear: both;
}
.alignleft {
float: left;
margin: 10px 15px 5px 0;
}
.alignright {
float: right;
margin: 10px 0 5px 15px;
}
.aligncenter,
div.aligncenter {
margin: 10px auto;
text-align: center;
display: block;
}
img.alignleft {
float: left;
margin: 10px 15px 5px 0;
}
img.alignright {
float: right;
margin: 10px 0 5px 15px;
}
img.aligncenter {
margin: 10px auto;
text-align: center;
display: block;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
color: #111;
}
#reg-form .formleft { background: none !important;
color: #fff;}
#account-form { background: none !important;
color: #fff;}
I'm not sure if this belongs in the javascript or Css forum. because it uses both. But my problem is that on mouseover my background color changes to what I want, but the font-color is not changing. Here is a snippet of my code: Code: <tr class="clickableTROpt1" onmouseover="this.className='cellover'" onmouseout="this.className='clickableTROpt1'" onClick='location.href="searchResults.php?id=2"'> <td><a href="#">Some data cells</a></td> </tr> my css file looks like this: Code:
.clickableTROpt1{
font-weight: bold;
cursor: pointer;
background-color: #FFFFFF;
}
.cellover{
color: #FFFFFF;
background-color: #CCCCCC;
font-weight: bold;
}
it looks like my css needs to be told to apply the changes to <a> tags as well? How can I use CSS to specify the color I want for the image borders on the page? Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text. So, is there a way to specify a:visited { color: do-not-change; }? Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move">
<form name = form2>
<span style="float:left;">
<select name= theDay size=1>
<option value=0 selected>Default [themes]
<option value=1>White</option>
<option value=2 onClick = "red()">Light Blue</option>
<option value=3>Aqua
<option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option>
<option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option>
<option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option>
</select>
When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3">
<div class="padding">
<?php if( $this->countModules('right') ): ?>
<jdoc:include type="modules" name="right" style="xhtml" />
<?php endif; ?>
</div>
And css for that part of the page is: Code: #index .box .column3 {width:252px;}
Hi, Please see http://lbclibrary.org/addtoinquiry.php (scroll down a bit to see the form) What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..." the form fields in the OTHER cell should become readonly (i.e. should not allow input). Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey? Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly. Thanks a lot! I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. currently i have links defined as a certain color and changes to a certain color when i hover over them.. i have a table which has these links inside the cells and when i hover over the cell, the background of the cell changes color but the link wont change color until i hover over the link.. is there anyway so that when i hover over the cell i can make the link change color too? the problem is i have some padding for the cells, so once i go inside the cell but dont hover exactly over the link, the background will change but the link won't until i hover over it thanks Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks I am having a problem with negative margins in IE7. On my website: commentsandcapers I am trying to get IE7 to display the right two boxes in the same way that Firefox displays them?? I have tried a few thing including position: relative in a whole bunch of places, none of which works. Do any of you have any idea how to correct this problem? Thanks! Hi. I have a top menu bar which is positioned below an image. The size of the image is stopping the menu bar from being further up, but I cant make the image smaller. Is there a way to put negative padding on the image to make the menu bar sit further up (effectivly on the image). To sum it up, here is an image: http://img40.imageshack.us/i/helpo.jpg/ Here is a link to the website: http://hiq.identityprojects.co.uk Here is the code for the image: Code:
h1#logo a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-size: 250%;
width: 283px;
height: 92px;
padding-bottom:-20px;
background: url(../images/logo.png) no-repeat;
text-indent: -99999px;
}
The red is my stab in the dark to get it to work, which didnt work. Id really appreciate it if someone could enlighten me. In FF3 this code behaves correctly but not in IE6. The main content disappears. Any ideas why and how to fix it? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #00FF00;
}
#wrapper {
font-size:0.8em;
font-family:"Arial";
position: relative;
min-width:960px;
}
#container {
margin: 0 auto;
width: 960px;
background-color: #fff;
}
#header {
background-color: #0033FF;
width:960px;
padding-bottom:50px;
height: 152px;
}
#contentWrapper {
margin-left: auto;
margin-right: auto;
width: 85%;
margin-top: -60px;
z-index: 1;
position: relative;
background-color:#FFF;
min-height:500px;
padding-left:20px;
padding-top:20px;
}
#mainContent {
float:left;
width:50%;
}
#services {
padding-left:60px;
float:left;
}
#footer {
clear:both;
background-color: #CC0033;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
<div id="contentWrapper">
<div id="mainContent">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
<div id="services">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
</div>
<div id="footer">
<p>
Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
</div>
</div>
</body>
</html>
I'm working on a set of tabs within tabs (or subtabs). My code is something like this: Code: <ul class="tabs"
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab_content">
<ul class="subtabs">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Now, "tab_content" has padding of 10px, because the subtabs won't always be there. But I don't want the padding on the subtabs, so I was giving them a negative margin of -10px. This works in all browsers but IE, which applies everything but the right margin, leaving a white gap. See the image I'm attaching to see what the problem looks like. Anyone know of easy fixes for this? Hello everyone, I am working on a website redesign and I just cannot fix one certain bug that I am having in IE7. I have this layout that I made and am using which works great cross browser here mactyler.com/NEWIDF/ Now I am integrating a PHP script into it and am having a hard time to get it to display the sidebar in IE7. iphonedevforums.com/news/index.php I think it might have something to do with the margin-left: -100%; that I am using on the sidebar div to align it vertically. It works and shows up in every browser except IE. If you guys could show me any way to get it working I would greatly appreciate it. Any ideas are welcome, I will try to be as helpfull as possible in answering your questions. im using (stripped most) CSS: Code:
h3 {
margin-top:-10px;
}
in this HTML Code: <h1>Header</h1> <h3>subtitle</h3> i want the <h3> the overlap the <h1> partly, like defined in the CSS. It works fine in every browser, but in IE, the rest of the page is distored because of the negative margin definition. is there any workaround for this Hello, I used a negative value for the position of a div on this site: Code: www.godynamic.nl Everything is like it have to be in mozilla browsers but in IE the image is partly beneath the upper layer and hidden. I tried z-index but this will only work with absolute position types. Is there IE hack for this? Thanks for helping. |
|||||||