|
CSS - Weird Jump In Ie
Hello,
I have a free text search with auto suggestion that opens below the input box. I finally managed to make it look good in all browsers, but I have one problem left in IE - when the auto suggestion div opens with the options and I press the down arrow to move down the list, there is a little jump. You can see it by going to : bateries.websitebuildingsolutions.com in IE and enter "b1" in the search box, wait a second for the div to open and than press the down arrow to move down the list. What can I do to fix this? Thanks Similar TutorialsI'm loading my FAQ list dynamically into a div. The data is being retreived asyncronously via javascript's xmlhttprequest object. Each Question has a jump target next to it. Is it possible to automatically jump to a certain tag within that responseText when loading all of that data? the following didn't work to automatically jump to a tag named "6" -----pathToAjaxScript?task=faq The jump works fine when not embedded like this. any suggestions? thanks Dan When i click on the Login at the loginform on www.ipan.be the form is jumping under the text, IE is good... Is there anyone who has this porblem or a solution? Hi I am having problems when using relative divs in CSS the items on the right keep jumping down to the next line. i have included an image of what it looks like, i wanted to make it so that the items on the right were aligned with those on the left. the left always stays fixed width but the right is dyamic depending on content. any suggestions? Cheers PS the code is as follows html, body{ margin:0; padding:0; } #topleft { position: relative; width: 180px; left: 12px; height: 23px; z-index: 1; vertical-align: middle; background-color: red; } #topright { position: relative; left: 192px; height: 23px; z-index: 2; vertical-align: middle; background-color: green; } #topleftwhite { width: 180px; position: relative; left: 12px; height: 23px; z-index: 3; vertical-align: middle; background-color: blue; } #toprightblue { position: relative; left: 192px; height: 23px; z-index: 4; vertical-align: middle; background-color: orange; } #leftmenu { position: relative; left: 12px; width: 180px; height: 23px; z-index: 5; vertical-align: middle; background-color: pink; } #rightcontent { position: relative; left: 192px; height: 23px; z-index: 6; vertical-align: middle; background-color: yellow; } #whitebottomleft { position: relative; width: 180px; left: 12px; height: 23px; z-index: 7; vertical-align: middle; background-color: gray; } #bluerightbottom { position: relative; left: 192px; height: 23px; z-index: 8; vertical-align: middle; background-color: black; } #blueleftbottom { position: relative; width: 180px; left: 12px; height: 23px; z-index: 9; vertical-align: middle; background-color: #FF33FF; } #whiterightbottom { position: relative; left: 192px; height: 23px; z-index: 10; vertical-align: middle; background-color: #996600; } HTML <div id="topleft">topleft</div> <div id="topright">middletop</div> <div id="topleftwhite">tleftcorner</div> <div id="toprightblue">bluetop</div> <div id="leftmenu">menu</div> <div id="rightcontent"> content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </div> <div id="whitebottomleft">bleftcorner</div> <div id="bluerightbottom">bluebottom</div> <div id="blueleftbottom">bottomleft</div> <div id="whiterightbottom">middlebottom</div> Hello I have a problem with the text while is loading before it is displayed the paragraph below and separators between the menu items are jumps. When the font/menu is loaded it is ok. Im using Google Font API, when i changed the font to Arial or Tahoma its working properly, only when i am using Google fonts i have problem. Thanks for any suggestion. Sorry for my English. Code: <head> <link href="styles.css" rel="stylesheet" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light,regular,bold&subset=latin' rel='stylesheet' type='text/css'> </head> <body> <div id="header"> <h1><a href="index.html"></a></h1> <ul> <li><a class="current" href="index.html" >Home</a></li> <li><a href="company_profile.html">Services</a><img src="images/separator.png" alt="" /></li> <li><a href="list_of_products.html" >Portfolio</a><img src="images/separator.png" alt="" /></li> <li><a href="gallery.html" >Contact</a><img src="images/separator.png" alt="" /></li> </ul> </div> </body> .... Code:
#header{
width:100%;
height:80px;
background:#fbb130 url(images/gradient.png) repeat-x;
margin-bottom:20px;
border-radius: 12px;
}
#header h1 a {
display: block;
background: url(images/mediacompass_logo.png) left no-repeat;
width: 287px;
height: 80px;
float: left;
margin:0px 10px 0px 30px;
}
#header a { font-family: 'Yanone Kaffeesatz', arial, serif;
font-weight:normal;
font-size:1.5em;
}
#header ul li{
float: left;
}
#header ul li a{
color:black;
display:block;
margin-top:30px;
margin-left:40px;
margin-right:40px;
}
#header ul li a:hover {
color:white;
}
#header ul li a.current
{
color:maroon;
}
#header img
{
margin-top:-55px;
}
Hey! I got some issues in IE8 (not checked IE7,6) When I press the "send" button and the form validates, the bottom 2 labels and a checkbox move down about 15px. I think it has to do with my positioning of the calendar icons above and the error messages, havent been able to fix it tho. http://www.borgweb.se/cvh/boka_rum.php is the address. The site is in swedish so bare with me, I think you will understand what I mean once you submit the form. If I then press ctrl-a or select everything with the mouse, the labels go back to their original position. Any ideas of what can sort this is welcome! Thanks! Hello, I'm trying to make a autostrech page with CSS. I'm having a problem where a DIV jumps down a line instead of compressing. Here is a link to the problem page: http://www.nexpost.net/community/te...rall_header.htm Try resizeing it in your browser. Has anyone had a similar problem? Any fixes? Thanks for any help. When I switch between pages with images on them, everything is fine. When I switch between pages without images on them, everything is fine. But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit. Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this. I'm using a centered fixed width css style so I have no idea how this could be happening. I'll just add the css if needed: (Any random advice or advice on how to make buttons without photoshop would be awesome too!) Code: body {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
td {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
a {
text-decoration: underline;
font-family: Verdana;
font-size: 14px;
}
a:link {
color:#2828FF;
}
a:visited {
color:#2828FF;
}
a:hover {
color:#AFAFFF;
}
a:active {
color:#AFAFFF;
}
img {
border: none;
}
#wrapper {
width: 950px;
margin-left: auto;
margin-right: auto;
}
#title {
width: 100%;
font-size: 27px;
font-style: italic;
background-image: url("images/bgwinterowl.gif")
}
#links {
width: 100%;
padding: 15px;
}
#body1 {
border: 4 double;
border-color: red;
background: #FFFFF0;
width: 100%;
text-align: left;
padding: 15px;
}
#body2 {
background: #FFFFF0;
text-align: left;
padding: 15px 15px 15px 100px;
width: 500px;
}
Hey everyone, I have an odd problem. CSS Code: Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
ul#admin_menu li.am_item{
This works... CSS Code: Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
li.am_item{
This doesn't work... I don't understand why. What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width. omg I am going to fall from the window with this stupid language lol... Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd.......... today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now Have anyone else faced a similar problem?... So I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! if you check out this website you'll immediately understand what the problem is about. The script I wrote, pulls pictures out of a database and displays them. I have a print feature (click the link that says: Ik wil de klassenlijst van **** afprinten). With Css I check wether or not a picture can be displayed on this page or if it has to be forced onto another page, when printed. Code:
<style type="text/css" media="print">
table {
page-break-befo auto;
}
</style>
When you check the webpage, you'll notice this row gives problems in IE. When I print the page from Internet Explorer: this row shows on the page, but not the picture that goes along with it. When I print the page from Mozilla: this row does not show on the page, neither the picture that goes along with it. as it should be Can someone help me? It is very important that the pagebreak is automagically forced when printed, because I can't guess the format on which people will print. Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows: Code:
.mainContentAreaBackground {
position:absolute;
z-index:11;
top: 190px;
left: 230px;
width:70%;
height:72%;
}
#mainContentArea{
z-index:12;
position:absolute;
overflow:auto;
overflow-x:hidden;
width: 67%;
height: 68%;
top:205px;
left:246px;
text-align:left;
font-family:Tahoma;
font-size:10.0pt;
visibility:visible;
}
There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox. You can see what I'm talking about he http://www.cs.mcgill.ca/~jbeard4/lepdev If anyone has any advice, please let me know. Thanks! -Jake Hey, at my site: http://www.optimumnutrition.com/products in IE/6 I am having a problem with the last side box in the left column. You can see a gap between the link to conditions of use and the curved bottom of the box. Anyone see where this is coming from? Thanks, Ryan I've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine. here be the code: Code: .mainBody {
color: #000;
font-family: helvetica, arial, "sans serif";
font-size: 12px;
text-align: justify;
padding-left: 35px;
padding-right: 35px;
}
.mainBody:link, .mainBody:visited {
color: #600;
text-decoration: underline;
}
.mainBody:active, .mainBody:hover {
color: #996600;
text-decoration: none;
}
.pageLinks {
color: black;
font-family: helvetica, arial;
font-size: 14px;
text-align: center;
}
.pageLinks:link, .pageLinks:visited {
color: #960;
text-decoration: underline;
font-size: 14px;
}
.pageLinks:active, .pageLinks:hover {
color: #960;
text-decoration: none;
font-size: 14px;
}
Hey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks! PHP Code: <div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');"> <div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div> <div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div> </div> (images attached) -Jim I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix? You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html Thanks in advance. The border around the fieldset in IE7 is messed up. The right border is shifted to the left several pixels. It looks fine in IE6. In FF the border isn't shifted but there is less padding on the right side of the fieldset than the left. I can't figure that one out either. If I zero out all the padding & borders the input/textareas push a few pixels out the right side of the fieldset. Looks fine in IE6. So has anyone seen either of these issues and might know how to correct them? Here is the page in question Thanks! This one is kicking my ***, if it were up to me i'd leave it as is, but it's not so here we go: http://www.beverley.com/kennettwip/ the two divs on the right will occasioanally "jump" a few pixels in to the left when reloading the page in IE7 (try it a few times) plus the 2px border on the right is sometimes 3px. It will not do it over the LAN which might mean it's a cache/fetch issue (bottom contents image of the buildings perhaps?!). But because i can't recreate it locally debugging it is a pain. Any help would be muchly appreciated but in the mean time i'm going to attempt to insert random empty divs and carriage returns to see what happens! Please go to www dot boatgofast dot com in IE8 Keeping mouse off the screen page area, refresh the screen. Then notice when moving mouse over the screen look how the navigation "jumps" to the left one time. It does not do this in FF or Chrome and is driving me crazy. Thanks for any help. Tom |
|||||||