Can you tell what I am doing wrong with the menu buttons? It works on IE8 and chrome but not in FF (9). I presume I've messed up something with positioning and z-index.
link to the site
Thanks.
Edit. It doesn't work on any FF and IE7.
Without downloading the site and playing with it myself, it's a bit tricky to work it out. But, I'd try adding position: relative; to div.content and then adjusting your img.menu(x) by setting left: NNNpx;.
Also, I don't understand why you use position:absolute; on the img tags when you're not using top or left attributes to set the position. Without a surrounding div with position:relative, the img tags will be referencing the absolute position of the entire window not the containing div.
Validate your html that list of errors. First thing noticed, id names must be unique to one element on a page. Also, make sure you are using FF or Chrome as your reference browser.
Related
Have hit a problem I've never encounted before.
I have a element, its a panel that is fixed to the right side of the screen, and the css for the positioning is:
.myPanel{
position:absolute;
left:0;
}
This works fine, the mark up for the panel is generated by vaadin.
Now everything works fine, however every now and then when I refresh the page the css position:absolute
is being ignored.
Naturally I open my devtools and see that according to the styles tab position:absolute IS being applied, it just doesnt look like it.
Now the odd bit
When I uncheck the tick box to remove the position:absolute styling nothing changes (as I'd expect) but when I re-check it, and the position:absolute is reapplied, the panel then shows correctly.
So even though there is no new css, removing then re-adding position:absolute fixes it.
I've always been under the impression that dynamically added elements will still take css styles that have been loaded pior. Is that incorrect?
I have ONLY had this in chrome, currently version 39
Any ideas?
UPDATE:
if at some point the css was being overridden I'd expect dev tools to flag that (style with a strikethrough etc) but its not. I have tried adding !important to it but get the exact same result (see is applied in devtool, disable and reenable fixes it).
I've noticed in the dom that vaadin is loading my custom javascript in the head, then the css, then its own inbuilt javascript.
This seems to be working according to the spec. If width and height
for a replaced element (which input is one) is auto, it's supposed to
use the elements intrinsic width and height, which might cause
absolute positioning to be overconstrained.
One fix is to wrap your inputs in a div, absolutely position that, and
use width/height 100% on the inputs. Note that Firefox also has this
behavior, and it is indeed in the spec, so it's better to fix the
website than to change Chromium.
~#9 chromo...#gmail.com
As per you saying:
I've noticed in the dom that vaadin is loading my custom javascript in
the head, then the css, then its own inbuilt javascript.
I would say this would be the case for all browsers. For more info, see a previous answer of mine in relation to this
Its a known bug which looks te be solved and the appears again, see also https://code.google.com/p/chromium/issues/detail?id=313221
For a school assignment I was required to redesign a website for a buisness.
I had only ever mucked around with css/html before and this is the first time I had written it for a full website.
The issue I am facing is the positioning of 3 divs is correct in google chrome, but in IE and firefox the divs are incorrectly positioned.
http://letsmine.info/mnpctech/index.html they are the twitter, facebook and checkout symbols on the right of the menu bar.
As this is the first time I have written CSS and HTML I presume this is a silly mistake and I am hoping that you can guide me into the right direction.
Also on the store page I need to layout the products with a picture and name like they are here http://www.mnpctech.com/MnpctechBilletFanGrill.html . Should I create a table and just put the images and title in there? just looking for some advice.
You need to add the following properties to #checkout, #facebook and #twitter:
display: inline-block;
float: right;
and remove the following properties from each one:
position: relative;
left: 980px;
top: -49px;
The page should then display properly in all browsers.
Make sure that you use floats and know your way around the "display" property well for positioning, I always try to stay away from relative positioning as it's a bit unreliable.
I have no idea what is wrong. No links (Navigation or image links) work in Firefox but work perfect in IE and Chrome
http://graves-incorporated.com/test_sites/solera_new/index.html
Please help me out
-Dan
I don't have Firefox on my laptop unfortunately, but this problem is often due to another element sitting on top of the links. Usually this is caused by a layout element such as a table or div.
Do you have Firebug or similar installed? There are a few developer tools out there that give you a coloured outline of your elements as you select them. It might help you to identify if you have an element sitting on top the links.
Check element img#rightAligned, it over all your menu links.
try #layout_style_links {z-index:9999999;} or bigger then current your img#rightAligned z-index
You have a td with absolute positioning (!?) that seems to cover the entire page. Don't use absolute positioning on a td element, that's just wrong.
Or even better, don't use tables for layout at all. This isn't the 90s anymore.
This activated the links for me in FF:
td.imageholder {
position: absolute;
visibility: hidden;
z-index: 9999999;
}
I created a select box using HTML and styled it using css:
#footer {
padding-bottom:60px;
position:absolute;
}
This disables the select box and makes it unclickable. But if I remove the "position:absolute" the select box works fine but it screws up my positioning. Does anyone have a solution for this?
EDIT: it works find when position:relative is used, but it's unclickable when position is fixed or absolute. I used for the HTML part.
These kind of issues almost always result from another element overlapping the textbox. To resolve the problem I usually use the inspector tool in firebug. When you click the text box it will select the invisible element instead which will give you a much better picture of what is happening.
That being said the usual fix is setting a higher z index as Simon pointed out.
It's difficult without knowing what other code may be effecting it. Try setting the z-index to high, or give us an example of the html aswell.
You've got something else wrong if the select is unclickable.
See this JS Fiddle: http://jsfiddle.net/SFUkR/1/
Absolutely positioning a select (or its parent container) does not make it disabled by default.
I have problem with displaying adsense ads in ie7
google adsense adds an iframe to display ads with id google_ads_frame1 with position:absolute the problem is this absolute position makes the ad stay there even if the page size changes (in ajax)
so how can i force it to have position:relative, i tried wrapping it in div and applied every possible property like positions, display, wrapping the whole content in a table, floats, zoom, height & width.
i also tried adding a css below the adsense
<!--[if IE7 ]>
<style type="text/css">
#google_ads_frame1 {
position:relative;
}
</style>
<![endif]-->
can anybody please help me, this thing has made me crazy...
the ads got unpositioned only when the page resized so everytime a function that cause change in size of the page i added one more javascript to it.
var googleAds = document.getElementById('googleAds');
googleAds.style.paddingTop= '1px';
googleAds.style.paddingTop= '0';
it you have better solution please let me know
you should be able to wrap the iframe with a div set with position:relative. are the elements on the page that change size with ajax set with position:absolute or floated as this may cause issues too.
Josh
I've had the same problem and I 'fixed' this by removing a 'background-color' on a wrapping div. Don't ask me why, this has to be the weirdest IE bug ever :)
The wrapping div encompasses almost everything on the page and is fairly unrelated to the table cell that contained the AdSense banner, I have absolutely no idea why this background-color had any effect on the positioning of the banner.
I found this 'solution' by just stripping the page bit by bit. At one point almost all HTML was gone but the problem still persisted. I the removed the CSS file after which the banner behaved normally. Then started stripping the full CSS until I found the line that (seems to) have caused the problem.
Making a proper test case of this is still somewhere on my list but haven't come around to doing that. Also pretty unsure that this is a generic solution. Main advise for now: If you see this problem, remove all CSS and see if that fixes the problem, if it does figure out what part of the CSS seems to be responsible and get rid of that :)