I'm having an issue with text overflowing within a column when an inline image is aligned left or right. Its hard to describe so I created an example page at http://alaskalegion.com/dev/test.php
This only occurs in IE6 and IE7. Any thoughts on how to fix this?
I'm using fckeditor on the backend which is generating these.
You need to make sure the p tag wraps around the image so that other paragraphs are above and below it. I can´t test it right now, but I usually use overflow:hidden on the surrounding block (the paragraph) and I think for IE you need something like zoom:1.
By the way, can´t you get rid of the inline 'align:left' and replace it by css in an external style sheet like:
#center-column p img {
float: none; // if still necessary...
}
#wide_column p img { // I don´t know what the id of the wide column is...
float: left;
}
(I don´t know if you need the p selector, I'm only trying to target the right images without seeing your code)
Related
I've noticed there is a small amount of padding on one of my containers that i would like to remove entirely however the code i am implementing doesn't seem to be working.
CSS:
.elementor-container elementor-coloumn-gap-default {
padding-top: 0;
}
I think i may have the name of the element wrong. My website is www.monoalarms.co.uk/wp and i am trying to remove the padding from the container that contains that 5 buttons. it is directly under the header image.
You are looking padding in wrong container,
please try next css -
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-bottom: 0; }
Seems your padding goes from banner
their could be many other css styles overriding yours. Remember CSS tries to take the last styling, so make sure yours is loaded last. You might need a more specific tag i.e 'body .elementor-container elementor-coloumn-gap-default', right click element and inspect in chrome, at the bottom of the browser you'll see the exact CSS tag it uses.
The website I am making is here: diyhelp.es
If you re-size the browser you will see the white background behind the content actually get smaller (even though the div gets larger) I've looked in the CSS and cannot see a problem. Since I don't know what is causing it I cannot paste any code (unless you want me to paste the full CSS?).
It's only a plain white background - no image.
In your css.css find line:438, that looks like this:
section.content, aside.sidebar, .footer-col { float: none; width: 100%; }
remove the float:none; and it should solve your problem. Why? I'm not sure totally, but float:none; is known to mess up other floating divs. It is better not to use it. I can't even think of a reason why you might need it. In you markup, you don't need it there, because when floating div is set to width:100% there is no room for anything to float beside it anyway.
I'm learning HTML/CSS and I encountered a problem. I'm currently working on goodwill.heyscout.com as a side project.
From learnlayout.org, I learned that the best way to structure a layout with a div is to give the inner a position:absolute, and the outer a position:relative. This works.
However, this throws the alignment off as soon as I add the position:absolute (I want the profile cards side-by-side). Without the position absolute, everything gets shifted if I want to alter the layout of the profile card. As you can see on the bottom two profile cards, they align as those aren't altered.
Can anybody point me in the right direction?
I also know that my code is pretty messy and that's what I really need to get better at... any other suggestions on how I can improve my code would also be useful.
You can throw a float: left onto your outer class and that should get them sitting side by side again. You may want to read up on using floats at some point as they can be very powerful (if a little hard to get your head around at first)
.outer {
width: 49%;
display: inline-block;
float: left;
}
BTW, I notice you using id="outer" multiple times. You should change this to class="outer" as an ID should be unique, whereas a class can be used multiple times. You'll see in the above CSS that I've used .outer as I'm targeting by a class name (rather than #outer which targets by ID)
Interesting problem you have found. I can't tell you exactly why it is behaving this way but it appears to be related to having text directly in the #box div or not. If you remove the "test" from the second one it aligns as you would expect. Likewise, if you put the exact same content in the second div as the first, they align.
For improvements I would start by never re-using an id (like you are doing with #outer and #box for example, these should be classes). The id attribute needs to be unique, no two DOM-elements should have the same id.
I would also suggest using a ul for #businesscards sice it represents a list of cards. This would make #outer an li. You did this in #navlist so you know what I mean.
Give just vertical-align: top; to your #outer div. The problem will be solved.
As this happens only to child elements, give something like this to solve the issue:
div > * { /* or just '*' */
vertical-align: top; /* or middle */
}
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.
I'm trying to get a website to display properly in IE6 and IE7. Here is a screenshot of how it looks in IE6.
alt text http://img225.imageshack.us/img225/4779/screenshot20091006at239.png
IE8, Safari, Firefox, etc. all display this site correctly. Could someone give me a hint as to what is causing the distortion in IE6?
If you want to take a look at the page source, the site is: www.devaswami.com
Get the CSS from here.
You're using an auto-layout table for the navbar, and it has colspans. This confuses IE, which is not very good at working out how big tables need to be when there are colspans. It makes the table wider than you need, which makes your cells wider than expected, which makes the ugly yellow background show through and it doesn't line up.
To fix it, set the style table-layout: fixed; width: 970px; on the table element, and add one <col> element for each column, each with a width: ...px style that tells IE exactly how big to make each column. Then it can't make any mistakes (and also larger fixed table layouts render faster).
To fix it better, drop the layout table and use positioned divs for the nav links. You could then also lose the silly image slicing and have a single GIF for the whole header background with the photo and links positioned over the top of that.
(Also it is worth fixing the validation errors both in the HTML and in the CSS. You are using // as a single-line comment in your stylesheet, but there is no such thing in CSS; you will only confuse the parser into dropping rules.)
Ummm at a glance, you have something that is float left and you have a margin left on it?
#foo {
float: left;
margin-left: 20px; //20px in all browsers except IE6 where it will be 40px;
display: inline; //this will fix this issue
}
There's a lot of possibilities and it's hard to just guess based on the screensnap. However, one big step towards making IE 6 and 7 behave better is to declare the doctype at the top of the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
That's for HTML 4.01, you'd have to update it to match what you're specifically using if it's not HTML (i.e. XHTML). That alone helps with some of the basic problems, but not all of them. If that doesn't do it, Google "IE6 css hacks" and you'll find lots of potential information that may apply to your context.
Edit: I suggest you fix the errors related to missing/improper end tags:
Error Line 199, Column 194: end tag
for element "a" which is not open
Error Line 200, Column 49: end tag
for element "p" which is not open
Source: http://validator.w3.org/check?uri=http%3A%2F%2Fdevaswami.com%2F&charset=(detect+automatically)&doctype=Inline&group=0
After that's done we can deduce that it's not a markup related issue.
Original answer:
Try applying haslayout to every element and using display:inline on any floated element:
#nav li { display:inline; } /* the selector *must* be floated and have horizontal margins in the direction of the float. */
* { zoom:1; }
For anything that was fixed by the zoom:1, apply a width/height and that will trigger hasLayout.
Though it might be useful if you actually posted some source code.