I can't determine why this text can't be scrolled over and the hyperlink (all in the body of the page) can't be clicked. I'm not sure if it's a CSS issue, or some other kind of issue.
The XHTML is valid, but the CSS isn't totally. Wondering if I can fix without totally remedying every CSS element.
http://www.writershore.com/ltlaw
Thanks for any help!
The z-index of your div.main style is set to -1. Because of this, it is located under some other div. Just set it to something higher and everything should be good.
First on all, your site doesn't seems to validate 100% of XHTML.
Also, your Web site doesn't work correctly on IE, so you must have something wrong in your XHTML and/or CSS and/or JavaScript.
Now what you can do is to try to remove your reference to all your CSS file and see if it's work. If it's still doesn't work, remove your JavaScript reference and see if it's work.
If fact, at this step, what you want to know is where the error come from, because if I take your "a href" tag and put it in an empty file, it's work, so your XHTML seems right.
My way to resolve this kind of problem is to reduce the problem at is simple expression. By that I mean, remove all the external factor that can have an impact in my problem.
I hope this will help.
Let me know of your result.
Related
I've been building this site in CSS with virtually no problems, and now all in a sudden I'm experiencing a problem with some basic positioning that I can't figure out in my body-3 class div, going below my body-4 class div instead of pushing it downward and lengthening the page like normal. The page almost seems to have some sort of max length, although I don't believe I've set any sort of max page height.
.body-3
{
/* what's going on here?*/
if you query this on the testing area of the company website that I am working on right now, in the external css file, you'll see exactly what I'm talking about.
This testing page is live here:
www.testing.agcomputers.net
Note: that black box appears to be within the body-4 class div (light grey area at bottom) but they are actually contained within the .body-3 class div, and have no upper margin that should push them down into any other div.
I'm unable to choose an answer without enough karma, but these guys below have found my obvious mistake, where I forgot to close some divs. Thanks guys!
You have 3 divs you did not close, which is messing with your structure:
<div id="transition-left">
<div id="transition-right">
<div id="center">
An easy way to find these problems and more is to validate your HTML.
Among other potential problems, you can find:
Line 138, Column 33: Unclosed element div.
You need to close all your open divs.
You currently have 3 unclosed divs inside/including the body-3 class, which causes your body-4 div to be nested and thus not behave the way you expect it.
Other people will give you a fish, I will teach you to fish for yourself.
Use XHTML (if local files, rename to .xhtml or if using PHP use the following before you send out headers (headers are sent as soon as you echo anything in PHP intentionally or not)...
$mime = stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml');
if ($mime) {header('Content-Type: application/xhtml+xml');}
else {header('Content-Type: text/html');}
In Firefox right click and View Page Information and if the Type: says application/xhtml+xml then it's XHTML. When you produce malformed XML (XHTML is a subset of XML) the whole page will break and you'll get an error message.
...or you could just struggle with regular HTML and manually validate every single time you reload but that wouldn't be very productive and would waste your time.
XHTML is much stricter but the best path is never the easiest. If you get stuck on anything because of XHTML visit me at my site, it's fully-fledged XHTML and I'll be happy to help you out.
I'm trying to get my navigation bar on my html page inline with my logo however it wont budge. I assume its because its following the flow of the html page, I dont really want to use absolute positioning, i did try and use the 'left' and 'top' properties in css however it didnt like it. Please could you advise where I'm going wrong?
Please see example here:demo of problem
P.s. The red was just to help me see what was going on.
There are quite a few errors with your HTML structure, some unclosed tags, and odd placement of elements. I have reworked the code for you to see an example that works for modern browsers. It's not the cleanest code but it should get you on the right path. http://jsfiddle.net/Lj9yn/18/
Okay I'm wondering whether there is a way to tell the printer when to create a page-break when printing a HTML page? There must be something, cross-browser compatible, that allows me to do this.
An example would be to create a page break before every element with a class of 'mainHeading'.
Can anybody shed some light on this?
Thanks
You can specify where to put page breaks by using CSS page-break-before and page-break-after.
The values you'll use for this are auto, which is default and always. Auto means that the page will break before or after the element (depending on which method you used) if necessary. Always will always force a page break before or after the element.
A note, there are other values available, however I believe these are the only ones which work cross-browser.
The best way to display what I see is by giving you a couple of screenshots:
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr1.jpg
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr2.jpg
The link above also shows the html/asp code.
The question is why am I getting that white line when I render content in the web browser????
PS. I'm using VS2010 (that I am ready to smash with a hammer...)
Images are inline elements.
Inline elements are rendered like characters.
Characters sit on a line.
There is space below that line for descenders (which you find on letters like g, j and y but not a, b, and c.)
That space is what you are seeing.
You could twiddle the vertical-alignment of the images or stop using layout tables
User CSS Reset, and everything should be solved. The reason you're getting the weird artifact is that, browsers by default apply some style on HTML elements. To nullify those default styles, designers usually use CSS Reset. A CSS Reset is a CSS file that tries to remove all default styles applied by browsers.
To debug your CSS margins and paddings, use Firebug with Firefox. Here is an image of how to do that:
You may be getting the browser's default styling here. I would recommend grabbing a CSS reset and seeing if that helps
OK, guys, I got the bottom of it. The following style should be added to the tag that hosts the image. I don't know why, but it helps:
td{ font-size:0; }
Thanks everyone for your help!
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.