I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}
Related
Have come across this problem when testing some older stuff in IE 11. Example here:
http://codepen.io/Samih/pen/zaqjA
Basically, when you have a display: table-cell element which has contents positioned absolutely, it works fine until you modify the content of that absolute container. You can see this by clicking one of the table cells in the example.
In Chrome, Firefox and even IE 10 this does not cause a problem, but in IE 11 you can see that the table cell height disappears to 0 and does not come back until you do something like resize the window.
I have tried a hack solution that involved using javascript to alter the cell size and then change it back, but it proved unreliable in the place I applied it. I'd much prefer a CSS based solution if anyone can come up with one.
I found an answer myself. Applying display: inline-block to the position: relative element fixes the problem in IE 11. I've no idea why, mind - but it works!
I have a jQuery splitbutton on my page that I am having a formatting issue with. Per my company's design standards, I am basically transforming a link into a button. Everything works fine, functionality is perfect, but depending on which browser you are using (I'm testing with IE and Chrome), the right side of the split button is just a little bit longer than the main button.
I think my issue is in this CSS class:
.default_button.medium_toggle {padding: 14px 5px 10px;}
If I change the 10px to 9px, it works in IE. The way it is, it works in Chrome. (Side note, in Chrome, if you zoom in on the page, it's off, but I'm not too concerned with that)
Any suggestions? All of my code is at jsfiddle.net/lwisdom43/6ErCs/3/. I placed it here because I didn't want to copy all of my CSS for these two buttons in this post. Again, this is all based on company design standards. Thank you for any help you may be able to provide.
If you put some text inside the second a-tag, you will notice that the source of your problem actually is another problem.
You set height and width in .default_button.dropdown_toggle and padding in .default_button.medium_toggle but not in .default_button or .medium_button.
Remove height and width from .default_button.dropdown_toggle and padding from .default_button.medium_toggle and it will have the same height (it will probably work if you set the height in .default_button)
This is the closest I've seen:
Changing font-size with jQuery css() function is crashing Chrome
But it didn't help.
Other threads mentioned that it's a bug in Webkit, but those were old threads and I couldn't find the bug report on Webkit's site.
The problem is that the header has a fixed width picture background and the navigation menu needs to stay within that width. I've since given up on HTML or CSS methods of accomplishing this. If you know of any, then please do share. So I've resorted to JavaScript (jQuery). And it works reasonably well, except in Chrome. The text actually increases in size for some odd reason.
Here's the simplified code in JSFiddle:
http://jsfiddle.net/alininja/j4jD9/12/
This gist of the code is this line:
$('body').css('font-size',(content_size-1)+'px');
For FireFox and Opera, the text size decreases to fit the header width, but not in Chrome.
If I run JSFiddle in Chrome everything works, but the funny behavior shows up on the actual website. This is happening on Chrome 17.0.963.56.
Thanks in advance!
If you want presentation consistency cross browser there is more involved than just setting font-size. You are assuming other font property defaults such as font-family are the same cross browser which they are not.
Use of a css reset will help
I'm trying to stretch the background to fill the whole window with HTML/CSS.
I've seen a few solutions for this but they don't work.
Every solution i encounter won't work on all the browsers, either Chrome won't stretch it, or IE won't stretch it, and if they both do, firefox will be the problematic one.
Does anyone have a working solution, that will work on all browsers ? (don't mind some javascript)
I believe there is no way to do this without creating an img element, and setting its z-order to the bottom and then customizing the width of that. This page has details.
Edit: In the link it says to use position: fixed;. This will in only work in older versions of IE if you specify a doctype. Using absolute is a simple workaround as long as the element is a direct child of the body.
I had this problem a little while ago and I found that this website http://webdesign.about.com/od/css3/f/blfaqbgsize.htm had a very nicely written tutorial which explains it well, plus it worked for what I was looking for.
http://reisio.com/temp/stretch/
write a css for that in which the background image will be in body.like
body {
background-image: url("/images/bg.jpg");
background-repeat: no-repeat;
background-position:center top ;
}
This will keep the total image in the body.Try this hope it will work.
EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.
You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup
Can't reproduce, works fine here in Mac OSX + Firefox 3.5.
I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.
I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.
I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.