There is a definate trend emerging towards having a website centered horizontally on the page. Not a problem for many using the margin: auto css (remember though to assign a width to the element being centered otherwise margin: auto won`t work) but there is a slight pecadillo that messes this up slightly, the scrollbar on the browser.
Less
More
Archive for the 'Coding snippets' Category
Have you ever had a div where the last thing in there (or even the only thing) is an image? If so you will most likely have found that most browsers puts 3px or so extra space beneath your image.
Here’s what I mean
Thisis a div which consists of a background image for the blue background, a paragraph for the text and an image of a heart to finish. Ideally I do not want the extra few pixels at the bottom showing my backgroudn through.
<div class=’testimonial’>
<p>“Thank you so much for your help. I met Bob through the site after less than a month, and we are still together and happy all these months on. Thanks Motorway dating ”
<br /><br />
<strong>Katie x</strong>
</p>
<img alt=’Motorway dating testimonial’ src=’images/testimonial_bottom.gif’ width=’178′ height=’76′ />
</div>
You would think that adding margin: 0px; padding: 0px will sort the problem but nope, nadda.
I tried googling but couldn`t find anything on the subject apart from suggestions of zero margins and paddings despite many people coming across this very annoying problem.
So I put the good old thinking cap on and remembered this nifty little piece of css
vertical-align: text-bottom;
Hurray! Place this onto your image css
.testimonial img {vertical-align: text-bottom;}
and voila, no extra space beneath your image. Just to prove it here is what my testimonial looks like now
Hope this helps.
This morning I have been developing a website from a series of .psd files. The designer did something that I haven`t had to code into a website for a very long time, the navigation area had an opacity, a semi transparent layer over an image. My first thought was cross browser compatability to ensure it works in all web browsers Continue reading ‘css opacity across all web browsers’
A month or so ago Firefox updated itself to version 2.0.0.6, as a result my firefox search bar options have been missing missing google.co.uk. I use the search bar within firefox and am returned with www.google.com results.
I trawled the Firefox website and Googled galore for an answer to this but found bob all, so this afternoon fed up of having to manually goto google.co.uk for my searches, I thought I would have a dig around.
Many years ago we used to size text using pixels, we knew where we were with them. Tell a web browser to set the text size at 12px, voila it was done. But then the web grew up, we realised we had to start to change the way we develop websites, accessibility and usability was key and pixel text sizing just didn`t do the job.
More and more people are using css on their websites to position text and images, which is a good thing but please check across all web browsers!
In the past week I have come across several websites that display fine in IE but fail in standard compliant web browsers such as Firefox or Opera. One of the main problems is the ‘null content bug’. Continue reading ‘Div disappearing in Firefox?’
Everyone by now should be using css to style their websites, if you are still using tables for your layouts, may you be strung up by your short and curly’s and flogged until you promise never to use tables again! Continue reading ‘Speed up your css development’
On a daily basis I stumble across many websites with a ‘print this page’ feature. Some use complex javascript to strip out images and certain content, others make a call to the database for simply the content text and others maintain seperate files made purely for printing! Continue reading ‘The easiest possible print this page script ever’