|
CSS - Fixing Ff Discrepancy
Site here
css here IE looks good, but FF is a little messed up... The horizontal nav should be directly below the "header banner", and the vertical nav should be directly below that on the left... FF has quite a bit of overlapping... Also, with the horizontal nav... how would I change it so that it doesn't start until after the width of the vertical nav, but had a background (with a matching border) instead of just white space, and a spreading background on the right (with a matching border)... Thanks Bryan Similar TutorialsI have a css issue with one of the sites I'm working on. It seems bizarre to me and I really don't know where to start. So, If any of you have an idea or even a hunch as to why this is happening please let me know. My website's CSS is showing up correctly on firefox on my pc. On my co-workers MAC it is off. Initially we thought it was because of the two different operating systems, but another co-worker tested it with his mac and it was fine. All of us are using firefox 5.0 and I don't believe it's a screen size/positioning issue because we all 3 have different sized screens. Mine being the largest and my other co-worker's being the smallest, both of which are the ones that the css worked fine on. Also, if any of you are viewing this via MAC please view my site and let me know if it's messing up on your screen: musketball consulting com /jif (no spaces) If all the menu items Home - Contact are on one row in the menu bar it is working correctly. If Contact is underneath the menu bar on the left side, then you are having the same css issue as us. Thanks for any feedback, it's appreciated! Hello, I have a cool jquery rollover script. But I have a problem with the CSS. The CSS for the script has an IMG tag to line the images up correctly. However, when I add the the script and it's CSS to my website, the IMG tag tells ALL images on website to go to the top left corner, and not stay where I originally placed them. Is there a way to modify the IMG tag in the script's CSS so that it only applies to the images in the script and not to affect the other images on my webpage? Here is my code: Code:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(function() {
$('.blocks').hover(function() {
$(this).children('.front').stop().animate({ "top" : '300px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
<style type="text/css">
#three {
width: 850px;
text-align: center;
margin: auto;
}
.blocks {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}
img {
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="three">
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
<p><a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/> </a>
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
</div>
</body>
</html>
Thanks for listening! hello forum, I am having problem in fixing my <div> position.The div become visible by an event.plz help me . Regards. Hey all I'm not very experienced with this. I'm having some troubles with floating divs. The page is here And the css is here The problem is that when I resize the window on IE6/win the divs on the main column fall down to the bottom of the page. Really apreciate your help. Marcello I am a web designer, taking on the challenges of some front-end coding. I'm fairly proficient with tables and HTML code, but I am trying a new web site using div layout and heavy CSS. http://neovistaproj.pangin.net Can someone take a look at this code, and provide some insight? I would really appreciate it. Some known issues: 1) the background has a gradient and a dropshadow combination. you can see that it isnt behaving properly, along the right edge. the gradients do not match up, but i know this isnt because the images were cut wrong. it is behaving weird, the way i have the bg and the images overlying it each other. 2) at the bottom, i have a repeating bg image so that the text can be as long as necessary, and still have the proper white bg, with border, and dropshadow. i had to jimmy-rig it a little, and chop my content well into two sections. its a pretty bad solution. any ideas? i will gladly provide any of the source files, for assistance, and will most likely compensate the individual who can provide me a workable template, for this design. THANK YOU! Ok, I have been working now for 2 days on a new testsite. Its far from done but I need someone with a fresh look to help me fix and optimize some things * The top menu is supposed to be white -->.vise in the css, but is not....I am missing something. * The bullets in the two right boxes dont appear in FF but do appear correctly in IE ?! Anything else ya see, let me know. I am very apreciate for help URL = http://www.serbia-today.com/test/testindex.php Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks Hey guys. I'm having a few issues with CSS flaots and this one seems to be dominant no matter what I try. What I have tried is setting the min-width of a parent div so that when the users resizes the page smaller than 40em(font sizes i think) they start to get horizontal scrolling. Where it happens. There is about 10 colored blocks for changing the colors and also there is a gear with the word networking next to it(or underneath it) What I want to happen. Instead of the colored blocks going underneath each other when the site is resized I want them to stay where they are. I thought setting the parent div(also floated) with min-width:40em; would work. Also I'd like the word networking to not apear underneath the gear. Same issue as the colored blocks. I can't figure out what I'm looking for in google and anything I came up with used position absolute and I don't think that's gona work here. http://142.177.157.241:8080/portfolio4/ I was wondering whether there is someway to fix the area of a content in CSS so that it wont expand if too much text was entered, just similar to the html code that fixes the area of the table. i.e. Code: <table style="table-layout: fixed;"> This code lets the table stay in a fixed size no matter how much text is entered... http://lovemeforme.org if you notice, right under the main image, you will see the two purple boxes (under the header and above the content and sidebar).. I don't know how to get rid of them. It has to do with the content and sidebar div's, because when I take out the background color it goes away, but... I can't figure out what to do, i've tried everything. Thanks in advance howdy, i've been workin on a site using some good CSS for the first time. i usually get fed up but it seems to be working pretty well this time. i have one little problem http://www.bnymusic.com/lairsite/ when i check it in firefox, safari and IE on mac there's a little offset between the text area and the main image.... any clue on what is happening and how to fix it? also noticed that in IE on pc the hover over Home doesn't extend into the padded area....but it works sometimes...crazy hopefully this ls small and i will continue to convert to CSS...sadly my photo area stumped me on the CSS and i used a table....oh well. prethanks, B Hi I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window. So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600. And if its not fixed, then the page is stretched when you enlarge the window. Cheers On my website lakelandedc.com the Side bar is very weird in the way tat if you go down from one topic to the other it snaps back and you lose your place for what you tried to click on. how can i fix this menu or make a new one that will b more user friendly? Here's the code in question I've attached the background image with the following CSS: Code: body {
background: #DDF19A url("/iris.new/images/bgIris-Blur-green-light.jpg") bottom left fixed no-repeat;
}
It works as expected in IE, but Firefox tends to lag a little bit when you're scrolling, and then snap into place. Same with NN, but Opera 8 is fine. Any thoughts on this? MPEDrummer Hi, I'm new to CSS (and Javascript) and am wondering how to fix a <div> overflow on my site (www.logicland.co.uk). here is my CSS code: Quote: /* Font CSS */ body { font-family: Arial, Helvetica, sans-serif; } #footer { font-size: 11px; } /* Layout CSS */ body { padding: 0px; margin: 0px; background-color: #D0DFEF; } #container { margin: 10px; border: 1px solid white; background-color: #6699FF; } #header { padding: 1px 7px 1px 7px; border-bottom: 1px solid white; height: 60px; background-color: #6C86DC; } #columnA { width: 150px; position: relative; float: left; padding: 5px; } #columnB { margin-left: 160px; margin-right: 160px; padding: 10px; border-left: 1px solid white; border-right: 1px solid white; background-color: #CCD5F2; } #columnC { width: 150px; position: relative; float: right; padding: 5px; } #footer { padding: 1px 3px 1px 3px; border-top: 1px solid white; text-align: right; background-color: #DDE3FF; } Is there simply a property I can change to cause the right <div> to push the footer down like the middle column does. Any info would be great. Cheers, BuckRogers01 Hi. I need 4 images to be fixed permanently in the corners of the page. I've found some code which half suits me, the upper images are fixed. But the left bottom one is not, and the right bottom one is on a "lower layer" than the text, and it's not acceptable. Could I get the lower images fixed just as the upper ones? or better yet make the text flow "under" the images? Supposing this kind of menu is preserved. http://testingspace.110mb.com/test.htm will some one guide me how I can make the image attached in col2 to be fixed one and should not scroll down though the text in the col1 may scroll down. I have used the following css code. html, body { margin:0; padding:0; border:0; } body { background:#fff url(bg.jpg) center repeat-y; } #container { max-width: 900px; margin: 0 auto; width: 80%; } #col1 { width: 48%; float: left; } #col2 { width: 48%; float: right; } #footer { clear: both; background:#fff; padding:0.75em; } The background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please! Hi guys, I have a query, im trying to create the effect, that this site has. Quote: http://www.exigeinternational.com/index.htm i mean that the i want to create the effect that that site has when the page is minimised,i want each side to get smaller instead of everything moving to the left. sorry if it sounds confusing. appeciate all help thanks andy |
|||||||