I created a set of small PNG files to hug the top and bottom of my website. By repeating themselves on the X-axis they span the entire width of the site and actively shrink and expand with the browser. This worked as predicted until the upper span was pushed to the right allowing another image (logo/button) to occupy the upper-left corner. This repeating image and the banner logo are a contiguous image so I'm doing my best to make it work as designed. I added this bit to my style sheet to nudge the repeating image over to the right:
left:650px;
This caused a horizontal scroll-bar to appear allowing access to a big-open-nothing at the right side of my site (it appears to be the same distance the PNG is being pushed over to). I believe this is called overflow? To constrain the overflow I added the following to the html, body tag in the style sheet:
width: 100%;
overflow-x: hidden;
This removes the scroll-bar in all the browsers I've tested (Chrome, IE, FF & Opera) but in most cases, side scrolling can still be invoked by clicking down on the center mouse button and activating the easy-scroll feature (I don't know the actual name of this feature, but hope you understand what I mean).
FF deactivates this mouse feature but still allows scrolling with the keyboard arrows. IE is the only browser that is working correctly.
I've looked all over for an answer but have only netted some possible solutions, but I don't understand how to implement or even how to describe them. Being a novice I suspect incorrect terminology is also hindering my searches. In any case, if you take a peek at my website:
http://www.cybergolem.com/indexWIP.php
BTW, my div nesting looks like this:
<body>
<div id="container">
<a class="homebutton" href="index.php">Home Page</a>
<div id="header"></div>
</div>
<div id="footer">
<div id="footNote"> — Thar Be Dragons Here — </div>
</div>
</body>
Thanks Much.
Related
I've been trying to find/prevent why my page is freezing at Firefox, I'm using Chrome's Developer Timeline to track the layouts and paints (freezing doesn't occur at Chrome, a huge issue at Firefox with ~300 UI tiles on the page)
It's understandable that gifs cause paints at each frame (a much much larger paint area than the gif itself, unfortunately) - however I don't understand why Chrome reports a "whole document" layout before each frame - since the size of the gif is constant, it should only cause paints in my opinion
I'm guessing these "whole document" layouts are causing firefox to freeze when there are many elements on the document
(I've researched reflows/layouts, repaints in depth, however none of the articles cover gifs, by looking at the timeline, I would say gifs are major resource hogs)
After more careful inspection and testing, I was able to prevent full document layouts by utilizing a gif container div, such as:
<div style="position: absolute; right: 0px; top: 10px; width: 45px; height: 15px; overflow: hidden">
<img src="/gif_url" style="vertical-align: top"/>
</div>
The issue was probably occurring because of the gif's positioning, happens with both float:right and position: absolute, even when the img element has fixed height and width of it's own (might happen with other positioning styles too)
I didn't dive into the issue too deeply to see what triggers the full document layouts and what not, however, it seems like a good idea to wrap every gif with a blocker div to be sure that browsers calculate partial layouts (I'm guessing there might be a combination of styles that might be able to achieve this inline, but I haven't pushed it yet)
- EDIT (after much inspection) -
It turns out the root cause is Bootstrap 2.3.2's default "max-width: 100%" style for img's
Removing that definition seized layouts caused by gifs
If there is going to be even one gif on the page, that style should definitely be removed / cancelled - otherwise at each gif frame the whole document is being laid out by the browser (chrome in this case, possibly others too)
i have a web site to fix http://www.clickconsultingservices.com , when the page loads there is a top slideshow showing banners, but when the page loads the very first banner is shown only for an instant and then goes to the next one. What is wrong with it, and how can i make it to take as much time as all the other banners? i feel like its a problem with page load, that by the time page loads the time of the first banner already expires. I tried changing the timing but it did not give effect to the problem.
What seems to be happening is that it loads all the frames of your animation, then starts the animation on page load. The judder is simply the bit before the animation starts, and all the frames are visible. You briefly see the last frame, rather than the first one.
Try adding visibility: hidden; opacity: 0; to all the slider divs, apart from the first one.
<div class="slide" style="width: 928px; position: absolute;visibility: hidden; opacity: 0;">
(Note that it's better coding not to use inline styles, but that seems the simplest way here, and you are already using some on that div)
Also: confusion may be caused by the image names which do not seem to match what they actually are, eg 2clickconsultingslider_email.jpg is about print, not email.
Please check this:
http://users.telenet.be/prullen/grid.html
This has a normal speed in safari, but the zoom effect is really slow in firefox.
Interestingly, if I add:
.item {
width:100px;
height:100px;
}
it seems to speed up a little (still not completely fluent). But that is not the size my images are at, so it looks messed up:
http://users.telenet.be/prullen/grid2.html
If I set the item width/height to the size of my images, thing slow down again:
.item {
width:160px;
height:160px;
}
http://users.telenet.be/prullen/grid3.html
Any ideas as that what is the reason of this? I'm out of ideas, I've removed/added statements but nothing seems to help. This is tested in different firefox versions up to version 10.
Thanks,
Wesley
To get your animation boosted, you can remove the box-shadow property from #container .item .thumbnail, this property is heavy and slows your animation.
But if you still want the shadow effect, you can try putting it behind as a background and not as a part of the animation.
It should take some change, but removing the box-shadow property from the animated div will make it faster. The "item zoom" div is the one responsible for the animation. By splitting the "zoom" class from the "item" class, and applying the right css properties on each, the animation shall work faster. (I've tried it with firebug)
HTML:
<div class="item">
<div class="zoom">
<div class="thumbnail">
<img src="...">
</div>
</div>
</div>
Position your elements absolutely so they are not part of the normal flow of the document. This will make it so the browser doesn't try to redraw the page every-time an animation plays.
When elements are relatively positioned, they can affect each-other when one is changed, so they all have to be redrawn to make sure that changing one element didn't affect all of them.
I created a demo and absolutely positioned the elements, you can see that the animations are much more efficient.
Here is a demo: http://jsfiddle.net/QLTbU/
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/
I'm using stylish to modify a website and I have this div full of text the needs to be moved upwards. The problem is the surrounding div has overflow-y:hidden to prevent text from flowing down the page. How can I allow overflow up but not down.
P.S. I know the css properties I used in the title don't exist, although if they did the style would already be done.
I needed to same, I found out you can just use clip, it's a very handy css property that isn't very much known. It does exactly what you want, you can shape the dimension of a div to your liking. With clip you for example can do something like
<div id="myBox" style="clip: rect(10px 100px 100px 10px);">This is some text to play with so you can see it is clipped.</div>