I have installed superfish module in joomla 1.5 . I have a problem in IE 6,7 . the width of 'li' elements are not calculated correct and this causes some items fall down. unfortunately I am working on my pc and cann't uploaded it somewhere to show you the site, but I hope maybe it is a common problem and someone can help me.
How can I resolve it?
Common reasons why you might get width issues in IE6:
Quirks mode: Number one cause of layout glitches in IE. Make sure your <!DOCTYPE> is set correctly.
The floated margin bug: If you're using float in your CSS and those elements also have margin, you may find your margins getting doubled. The best work around for this is to use padding or border instead of margin. You may have to adjust your layout to deal with it.
max-width and min-width not supported: IE6 simply doesn't support these CSS features. It will break your layout. Not much you can do about it.
Floats with spaces between them: In some cases, floated elements may appear a few pixels further apart in IE6 than other browsers. IE is inserting spaces between them because it's in the HTML code (maybe they're on separate lines of code?). Remove the spaces and IE will render it correctly.
One of the has-layout bugs: IE has an internal flag called has-layout that has a number of rendering bugs associated with it. You can't set this flag manually; IE decides what it should be based on the other properties of the element. You can sometimes work around it by setting zoom:0; in the stylesheet for the element. But not always.
Further reading: http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
Related
I am working on a page where there are two rows in the header.
The first row has a "My Account" icon, Company Logo, and Logout.
The second row has a navigation bar.
When the Focus Ring/Focus Indicator highlights an item on the first row, the bottom of the focus ring is cut off by the navigation bar in the second row.
I am not allowed to change the spacing of the elements on the DOM.
Is there a way I can change the layering so that all of the elements on the page are not changed in size or location, but the Focus Ring is not cut off by the navigation bar?
The site built with React.
I've tried googling a number of things, but haven't turned up much specific to this issue.
I'm a little new to programming (my first job, first year). I'm not totally sure where to even start.
You are looking for z-index. The second element is positioned in front of the first element and so it covers the focus indicator.
This allows you to specify how far 'forward' elements are on the page.
Assuming nothing is using fixed or absolute position within the <div>s you are working on this should solve your issue.
i.e.
<div class="container">
<div id="behind" z-index="1"></div>
<div id="infront" z-index="0"></div> <!--The z-index is not really needed here so try without it first, it is to illustrate that the item in front at the moment should have a lower z-index than the one at the back-->
</div>
You may need to play with the z-index in order to get this to work (you can go to 999999 without a problem, but try and use as low a number as possible).
You may also have to fiddle with heights of elements if the site is poorly designed but without a code example I can only offer general advice and gotcha's
Without a code example it is difficult to suggest a solution, but it sounds like your two rows are overlapping, and thereby hiding part of the focus indicator.
Three different solutions come to mind,
Change the height and placement of the two rows to avoid the overlap in the first place
Try using the CSS z-index property to control which element is rendered foremost
Using the CSS outline-offset property, with a negative value, i.e. -5px, to shrink the focus indicator and hopefully making it visible
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
I'm new to CSS, jQuery etc. I have created a page and I need some guidance.
Currently I am using the metadata viewport tag with a fixed width (since my page is a fixed width at all times) and a initial-scale of 1.
This works very well once you have zoomed out - on all devices. The page renders at the correct scale, everything is great and you can zoom in and back out, and the page stays the same.
The problem is the INITIAL zoom level. When "Initial scale" is set to 1, it will zoom in way too much on phones, which is disturbing to first-time-viewers.
Is there a way to just tell whatever device that is viewing the page, that it should just zoom out as much as the viewport allows it? Like you would do with you fingers as it is right now. Just zoom all the way out and everything is fine... There must be some simple way to accomplish this? I've searched the net as much as I can, and all the solutions I have found either don't work or are really complicated, which seems unnecessary to me!
Thanks in advance
Turns out, the entire thing was because I had used a comma (,), instead of semicolon (;), to seperate my arguments in the metatag. This caused my first argument, which was width:810px, [next argument] to become invalid, cause the comma was attached to 810px. As soon as I replaced it with a semicolon, everything worked!
I've relatively positioned one of the elements with negative 'top' and 'left' values, the negative 'left' value actually takes the element outside of the 'body' width, this seems fine in all browsers apart from IE7 where it just cuts it off.
establi.sh
I thought it might be that weird bug where if it's outside the parent container then you have to set a z-index but that didn't work, then I thought it might be the hasLayout bug but trying to fix that didn't work.
I'm not an expert on IE browsers so need some help. I'm thinking IE7 might be choking as the negative left value actually takes it outside the body?
Thanks
E7 doesn't support negative margins the way you want it to. Fortunately, you can easily just increase the width of your body tag, and then increase the left style of the rest of your absolute divs and accomplish the same result.
Problem site: www.basing.com/problem/index.html
If you hover over the items in the list on the left you should see a nice popup showing the remaining characters of the text.
However, this doesn't work in IE 7. Does anyone have any ideas why not, or suggestions on how I could go about fixing this? Thanks.
There is a known bug about z-index on IE <= 7, when you use z-index when you mix absolute and relative positionned DOM elements you have to invert the z-index properties so that the lower will appear on top of the higher.
See http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug or http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7 for another solution.
There is about a million post about this bug on the internet.