|
CSS - Yet Another Ff Vs Ie Post - Help!
The following page is my first foray into the world of css:
webpages.charter.net/slyraymond/SFL/sflindex.html If anyone here is capable, please test with both FF/Mozilla and IE. You'll notice two problems immediately - namely, a problem with mouse-over colors and a partially buried div. Can someone tell me in idiotspeak what exactly causes the discrepancy and how to fix? Css file follows: body { font: 8pt/16pt arial; color: #000000; background: #ffffef; margin: 10px; } p { font: 12pt arial; margin-top: 0px; text-align: justify; } h2 { font: italic normal 14pt arial; letter-spacing: 1px; margin-bottom: 0px; margin-top: 0px; color: #93006b; } h3 { font: normal 12pt arial; letter-spacing: 1px; margin-bottom: 5px; margin-top: 0px; color: #93006b; } /* f9c08b */ tr { font: normal 10pt arial; height: 12px; } a:link { font-weight: bold; text-decoration: none; color: #93006b; } a:visited { font-weight: bold; text-decoration: none; color: #db7311; } a:hover, a:active { color: #4f4e4d; } #container { background: #efefd2; padding: 0px; height: 900px; margin-top: 78px; } #main_menu { position: relative; top: -18; left: 5; z-index: 2; background: #e3e45c; padding: 3px; width: 200px; } #main_menu ul { margin: 0; padding: 0; list-style-type: none; } #main_menu li { background: #ffffdd; font: 10pt arial; padding: 5px; } #main_menu li a:hover { background: #e3e45c; display: block; } #section { position: relative; border: 2px solid #e3e45c; padding: 3px; left: 250; top: -168; z-index: 5; width: 600; background: #ffffdd; font: italic 14pt arial; } #section_content { position: relative; padding: 25px; left: 295px; top: -179; width: 60%; background: #ffffef; font: normal 10pt arial; } #ebay { position: absolute; padding: 10px; left: 25px; top: 300px; width: 150px; background: #ffffef; font: normal 12pt arial; text-align: center; } Similar TutorialsHi I am currently trying to self teach myself CSS, harder than I thought, lol. Anyway I have a page that uses CSS but there are certain areas that don't display correctly/I can't get to work. I'm hoping someone can help Page: jinx-inc.co.uk/development Problem Areas are highlighted in this picture (to make things easier) jinx-inc.co.uk/development/problems.jpg 1: This area should have the blue colour all the way down. 2: Pretty much same problem as 1 but this is a repeating background instead of a background colour. 3: There is a Footer but it's gone walk about. The only way I can get it to show is through absolute position as this css file will be used as the master for all pages, so absolute won't work. 4: Table border problem but not too fused about that at the moment. Code available: jinx-inc.co.uk/development/css.txt jinx-inc.co.uk/development/html.txt Many thanks I would like to post on another forum with CSS. Is there any way to do this? I already have the content laid out with css in my html editor and just wanna transfer it to a forum as a forum post. I suspect forums don't allow css so just wondering if there's a way around this. Appreciate the help, JH Hey All: This is my first post to this forum. Any and all assistance is greatly appreciated! I am having an issue with some floating div's. I'm sure it's as easy as moving the div to a different parent but, I'm having trouble figuring this one out. My site is pretty simple. Most of the div's are floating left. I have one div that is floating right. I want the right div to stretch or contract to the full height of the content. Most of my content fits into a 740px height. There are a few that are more (up to 1500px). So, I want to put 1500px worth of images in the right column but only show as much as needed to fit the content area (most of the time only 740px). Right now, the full height of the right div is showing. I would post a link but, I'm new to the forum and it isn't allowed. If there is a way around this, I am happy to provide a link. Thanks in advance for any responses! Jeff Ok I just reached desesperation. Ive tried EVERYTHING, believe me. Ive even had some developer help me from england, which solved the problem and then didnt know how he fixed it cause he forgot... I have JSCook menu and yes its the one perfect for my site, but the menu just wont come on top of the post area! It gets behind and ive tried with z-index and nothing www dot servicanonline dot com -> Click Top called "Perros" to see my problem. Please help me as Ive done everything I can and still cant solve this. I know you pro CSS users probably know this already, but I was accidentally discovered something REALLY cool with css. CSS Code: Original - CSS Code alexText { background-color: rgb(116,130,208); }
Code: <alexText> Some Alex Text </alexText> That code essentially creates your own HTML tags. Wow. That's going to save me SO much time. I have set the Notification Type to "Instant Email Notification" but I do not receive any email when someone replies to my posts? Any idea why? Brad. I'm working on a video blog right now and I REALLY like the way this is set up. See Gary Vaynerchuk WineLibrary(dot)TV videos On Gary's videos there are always the Share Links above the video. These aren't part of the player but somehow built into the post template I imagine. I also imagine aside from the css/html aspect this task of creating the links is being automated but I could be wrong. Anyone have any ideas on how I could accomplish something similar? Thanks I am trying to set up my post using a wordpress template I found on alexking.org called Blue Radiant. All was going well until I decided to make a few test news posts and it started doing something funky. http://www.unlimitedzelda.net If you view the site in Internet Explorer, it's fine. However if you view it in FireFox, you can see that all but the most current news post gets pushed under the left nav bar. I can't figure why and I hope someone else will be able to help me out. Any input is greatly appreciated. Hey guys, what I'm trying to do seems simple but I can't seem to figure it out. I have a wordpress blog and am formatting the text, I've used line-height, line-spacing and letter-spacing because I want to make it readable. Now what I'm trying to do is align the width of the paragraphs to the images or at least to the widge of the post container which is 585px. I changed the width to 585px and it that didn't help. My site is (havenhart[dot]com) and as an example, see (oneaboveone[dot]com) that site has the text aligned to the image, or atleast te container width. Can anyone offer any resources on how to do this? Thanks. Here is my code Code:
<html>
<head>
<style>
div.menu
{
border: 1px solid #F3F3F3;
padding: 5px;
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="menu">
<table style="width:100%">
<tr>
<td>Test</td>
</tr>
</table>
</div>
</body>
</html>
What i am trying to do is set the division to align in the center of the screen. At the moment it is aligning on the left hand side. Why is this code not working? Code: http://www.blametruthproject.com/home Hey CSS gods So I need some help with my dropdown menus, they are currently going behind the content on my posts in my blog, I think this could be fixed with CSS but I guess you guys could tell me that. Thanks, Neil. Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page. I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. Hi all, Been having a problem that's been driving me crazy lately. On my blog www.mytechnicalinterviewexperience.com, I'm getting a small dot that's appearing right between the top of the main post area and the right sidebar. If you see the text "subscribe" at the very top of the right side bar, the dot is up and to the left with respect to that. Anyways, the dot is probably hardly noticeable to visitors, but me being extremely anal, I'd like to try and get rid of it. I notice that it has something to do with my amazon associates recommendation widget which is further down the right side appear. It only appears after the recommendations widget finishes loading. Does anyone know how to fix this? Thanks, MyTechIntExp |
|||||||