|
CSS - Css Rule Oddity
My page layout consists of a content section and a sidebar section. I'm attempting to match the style of the sidebar links to those within the content.
Odd thing is, although the style of the links appears correctly within the content DIV, any links within the sidebar refuse to style correctly when declared with the content declaration. So, this works: Code: #content a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
#sidebar a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
Whilst this does not: Code: #content a, #sidebar a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
I'm at my wits end as to why the second (preferred) declaration will not style any sidebar links. Any ideas? Similar TutorialsNew member here. The dreaded conflict between IE, Firefox, and Safari. In IE, the content centers on the page, as planned. On Firefox and Safari, the content pushes to the left side of the screen, despite what is specified in the style sheet. Any assistance in understanding and resolving this will be greatly appreciated. Here is the style and markup: Code: 1 <head runat="server">
2 <title></title>
3 <style type="text/css">
4 div#divMain {
5 text-align: center
6 }
7
8 div#content {
9 position: relative;
10 width: 250px;
11 height: 100px;
12 background: #dad;
13 }
14
15 div#logo {
16 background: #cfc;
17 text-align: left;
18 position: absolute;
19 top: 20px;
20 left: 25px;
21 margin: 0px;
22 padding:0px;
23 border: 0px;
24 width: 200px;
25 }
26 </style>
27 </head>
28 <body>
29 <form id="form1" runat="server">
30 <div id="divMain">
31 <div id="content">
32 <div id="logo">..</div>
33 </div>
34 </div>
35 </form>
36 </body>
In the above code, everything displayed exactly the same in IE, Firefox, and Safari until adding text-align: center to divMain. After that, divMain displays in the center of the window in IE with no problem but it is still lined up on the left side of the window in both Firefox and Safari. The ultimate design of the page calls for divMain to be centered on the page and maintain a centered position regardless of the size of the browser window or the brand of the browser. If someone can help me understand and resolve the problem in the above code, it will be very appreciated. Thanks, John Ok what i want to happen is that when person clicks on a link i want a div to appear/be visible underneath that link. But i want that div to not take any space unless i click on a link. I recently did something similar BUT the div was taking the space but was just hidden. Hi, I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors. So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6. Here is the site (work in progress still): http://southcarolinanightlife.com/ The CSS for the menu is he http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine. Many thanks if anyone can assist. Kevin I am trying to create a separator bar that will act like a HTML <HR> If firefox it works like I want, but in IE it does not. In IE it only displays the width of the image file spacer.gif CSS: Code: .bar {
display: block;
position: absolute;
left: 50px;
right: 60px;
top: 280px;
height: 15px;
background-image: url(bar.gif);
}
HTML: Code: <div class="bar"><img src="spacer.gif"></div> ive found that in previous attempts this would work: Code: <hr width='90%' color='#990000' /> but when i changed to storing the colors and things in a css file, i found that i had to do this: Code:
hr {
width:90%;
border:1px solid #990000;
}
<hr />
now is there a way where either i can set the horizontal rule to use an image as the color (just a 2px high image) or is there a way where i can get an image to act as a horizontal rule? PS, if the latter is the choice then is there a way to get it so that i dont have to keep specifying the image source? I have all pages that follow a CSS Rule. These are Dev Boxes that I created for my site. One of the text on one of the pages is 1700 pixels height the others are only 700. When I created a rule for all pages but when I added the text on the one with 1700 pixels it stretched out all the boxes on all other pages as well. I want to break that one from the others so that it does not format all my pages like that one. How do I do it. I do I keep the CSS code style but on that one in particular change the rule to only allow that one to be 1700 pixels long. Basically I don't want to have to recode the CSS page but I want that particular code to be just for that one page and keep the others with the 700 pixels height. Please give me a simple explanation on how to break the rule on that page so that I can manually adjust it for that one page. thanks I want to know if ID Selectior for a class is avaible in css. I got many textboxes cssclass'es applied to .TEXTBOX_BLACK but I wantto add extra attribute to only Textbox10 something like overflow :auto; thanks much before any answers. regards. my attempt is below but ofsure not working: .TEXTBOX_BLACK { border-style : solid; border-width: 1px; border-color:Black; font-family: Tahoma; height:14px; width:140px; background-color: #414141; } .TEXTBOX_BLACK #TextBox10 { overflow :auto; } I'm customizing an IP Board (version 3.2.1). I've set up a test board and when I've got it how I want it I'm going to export it as a skin which I'll install on a live board. In the current version of IP Board, the post title is above the main title bar in post view, whereas in the previous version, the post title was in the main title bar, which is where I want it. One of the IPB boffins gave me a code mod which enabled me to place the post title in the main title bar. The problem is the standard code that governs the post title also governs the forum title (pictured below) in forum view. I need to get rid of this title (circled) in order to reduce some of the space between the header and the main title bar. But if I comment out this title, I also comment out the post title. According to the guy who was helping me, the only way around this is to create a new class, which is beyond his expertise -- and way beyond mine. How do I do this, or is there an alternative and hopefully simpler solution? Many thanks! This is the code in question. Code: .ipsType_pagetitle, .ipsType_subtitle { font: 300 16px/1.3 Helvetica, Arial, sans-serif; color: #141719;}
The circled title is what I want to remove. http://www.thechristianidentityforum.net/smf/pix/screenshot.jpg The code also affects the post title in post view, which is why I need a new rule set/class, so I can delete the forum title in forum view but not the post title. http://www.thechristianidentityforum.net/smf/pix/screenshot2.png EDIT: For some reason the images won't display in the post. They display in preview but not when posted. Just click on the urls to see the pix. I apologize if I've broken a forum rule or two in doing this. Why does my third style rule have no effect? I thought the "A > B" was read as applying the rule to B if it was a child of A? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style>
div.large_title {
font-family: Trebuchet MS;
font-size: 18pt;
line-height: 20pt;
color: #003366;
}
div.quickpick {
border: 1px solid #003366;
border-collapse: collapse;
width: 250px;
text-align: center;
}
div.quickpick > div.large_title {
font-weight: bold;
}
</style>
</head>
<body>
<div class="quickpick">
<div class="large_title">Test</div>
</div>
</body>
</html>
Also, how can I add top and bottom margin to a text string? Do I use Margin or Line Height? So, what would I like to have? A css rule that would affect visual appearance of only the <input type="submit"> elements (or any other sub-type of <input>, but again, affecting that sub-type only). Is it possible to do? How? I have a lot of .NET pages with a LOT of submit buttons (within datagrids and regular buttons too). There is a way to do it programaticaly in source code of .NET pages, but I'd like an elegant solution like css, which could be done without recompiling entire project. Any help is highly appreciated. I 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 |
|||||||