Here
is a (big) example of the massive problem I am having, when this page is live at euroworker.no/order, it is dynamically generated, I have supplied a static version for people to mess with. All I need is where it says "Endre Valg" to push the div wrapper under it down.. Sounds easy huh? I have tried many many things, I hope that some discussion and even trial and error can help us here.
Sorry for the huge amount of code and stuff but this has taken me all day and I am out of ideas.
Thanks.
Edit: Decided to go back to tables, thanks all for the suggestions. :)
Sorry I'm not going to give you the answer here, I have had a look and can not find it quickly. I will however give you two methods to get this problem sorted.
The first is this is a table of data what is the best html element for displaying tabular data? The table. I know there is a great, justified back-lash about using tables to format the page but when you have a table of data they are the correct element to use. This will simplifiy your markup and your css.
If you choose not to use a table what you will need to do is remove all the css effecting this page. look at the page check there are no over laps. Add back a few of the css classes and check there are no overlaps ... repeat. Start very simple and build up until the error occurs again, now you know what peice of css caused this.
If I was to have a guess it would be that the error was in elements marked either float or position:relative/absolute, but one of the above methods will get you there in an hour.
Sorry for not directly addressing the problem.
I support the idea of the previous answer to stick to the standards and use a standard html table for data and html blocks <div> for layout.
If your want to keep your box-structure, you should have a look at the css display-property instead of using position:absolute for positioning your table cells. This resource http://www.quirksmode.org/css/display.html#table might be interesting for you.
I'd echo the comments about using a table. It's never wrong to use a table when you're displaying tabular data, which is what you're doing here.
Either way, adding clear: left onto the class declaration for the anchor tag will help solve your problem:
#cart2Produkt a {
color:#0a5692;
text-decoration:none;
line-height:15px;
clear: left;
}
But the way this page is constructed is just a nightmare waiting to happen. Use a table.
Related
At first, it looks simple, and at the end of scroll event, a margin (or padding) will be applied at the top.
This is useful when there is a sticky element at the top. Then when a link is clicked and scroll down to somewhere on the page, it's nice to have this element "skipped" by the scrolling.
This article explains it pretty well: https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
I could make it work on really simple examples, and that works. However, I am trying to make this work on a normal website, and I can't. I think there is something not clear for me (or in general?) about how it works.
Please have a look here: https://meowapps.com/media-cleaner/tutorial/#Media_Library_Scan
When a link is clicked on the right, it scrolls but the scroll-padding-top is completely ignored. I have tried many techniques, moving the CSS property in many different places in the code, but that doesn't do anything.
Do you see what's wrong? Ideally, it would be great to find real the cause and maybe have an explanation why it doesn't work in this case and describes what's that case actually is.
Thanks a lot :)
scroll-margin is not useful if scroll behavior is controlled by JS
Looking at your page source, I found easy-table-of-contents WordPress plugin, which relies on smooth-scroll jQuery script. Also, I don't see scroll-behavior: smooth; in your body either (see this MDN page for reference).
It looks to me that your anchor link is not controlled by CSS but by JavaScript. And, as you'd know, when something is controlled by JavaScript, any relevant style declaration via CSS might be ignored.
What to do?
I honestly don't know. Perhaps you could replace the table of contents plugin with something that gives you a finer control. Perhaps you could refactor the said plugin yourself. In any case, should you need to keep the jQuery dependence and a particular WP plugin, you might have a tough luck for this fix.
I got your point, sorry for a long answer but I am sure this will clear your doubt with the output.
scroll-margin-top and scroll-padding-top define the amount of space to be given from within the element or from outside the element whenever a scroll event occurs.
Sometimes we see some text gets cut from the viewport such that it's half visible.
To avoid that kind of thing scroll-margin-top is helpful.
when no scroll event happens:
when scroll event happens but with scroll-padding-top:20px;
see an example from MDN Web Docs
Now applying this logic to your link example
When we click on the link it takes us to the specified div,
But when the scroll-padding-top is applied the output looks like this it gets stuck to the top of the viewport, even if we specify a certain margin with CSS the output is the same because the padding is applied from within the element:
When we apply scroll-margin-top we get the desired output on the link click event or scroll event:
a{
font-size:30px;
text-transform:capitalize;
}
#down{
scroll-margin-top:30px;
background-color:royalblue;
height:100px;
width:50%;
}
<center>
down
<section style="height:1000px;"></section>
<div id="down"></div>
<section style="height:1000px;"></section>
</center>
See Output
Correct me if I am wrong anywhere.
I have developed a responsive email design but Outlook keeps adding a gap after one of my tables. I have tried everything. I have added border-collapse:collapse; I have divided tables; added block styling to my images - nothing is working. Any help would be greatly appreciated.
The html can be found here.
Image example of issue here.
instead of giving the float property to tables. it would be better to make 2 columns and then placed each table in each column.
just for your information Outlook.com drops margin and float support entirely
I would go the direction of antwort and use table columns that are forced to full-width display: block; with media queries (instead of floating tables next to eachother).
See your modified HTML here. I haven't tested it, though. It may need more work, email clients are notoriously frustrating.
I'm redesigning the skin and layout of a user info form. Initially it was done using a table, but I really don't want to use a table for the layout. My code is here http://jsfiddle.net/Chris22/eNqrM/ I've tested my code in all browsers, Opera 11.x, FF 12.x, Chrome 18.x, Safari 5.1.x and the form looks great. My problem is IE9.
Please take a look at the code in IE9 and see if anyone can figure out what I've mis-coded as to why the form elements don't line up and some have a different text treatment. I just can't seem to figure it out.
Here is the original table-layout if any one wants to compare. http://jsfiddle.net/Chris22/q3sCb/3/ Both sets of code have java spring form tags, so it was a little difficult for me as well to figure it as I am a FED (front-end dev). Maybe I've got something mixed up here. I don't know.
Thanks!!
P.S. If modifying the original table-layout is the better way to do this, I'd appreciate some help on how to begin to code that... I haven't used tables for layout in a while.
IE9:
I fixed this. May not be the best way, but I wrapped the input elements in the label tag and added a rule float:right to the input tag within it. Thanks for everyone's feedback
I've got the same problem with a relatively straightforward form that has inputs with a value attribute. Not sure if that's actually an answer, but it may help to know that you are not alone in seeing a misalignment. I'm slightly baffled as to why some people are NOT seeing a misalignment. The fact that float:right gives a fix is useful to me and may have something to do with the mysterious hasLayout property that has long been a 'feature' of IE. Floating, left or right, induces 'hasLayout' but may have other consequences. A common fix for not 'having layout' is to give everything a zoom:1 in CSS - this induces 'having layout' and usually without any visual change, because zooming with a factor of 1 doesn't resize anything.
...Screenshot of my abomination
jsFiddle: http://jsfiddle.net/ELZD8/
It was looking fine, until I needed to change the fieldset size: and since I was using position:relative for literally every element on the page, changing the fieldset screwed everything up, bad. Forgive me but I'm pretty new to CSS and I know I'm using wayyy too much code.
So, as you can see in the imgur, it looks like hell now. What's the quickest way to fix this? I know it probably has to do with floats and margin:left and margin: right, but could someone provide some insight before I go bananas?
Any input is appreciated, cheers.
Easy fix:
You need to use proper div sectioning, that is, make each section a div and then place elements inside each div, otherwise it becomes a clusterfuck. You also need to list your elements in your css file by order of appearance in the html, otherwise it's painful to look for things...
Don't use massive amounts of <br>, use padding and margin css rules instead
Yes, you may use position:relative, but since you asked for advice, I am strongly against it, it takes longer to build, longer to update, longer to fix, etc. Use sections, floats and keep it simple, Simple is your friend.
I also suggest strongly against using fieldset, use <form> instead, its a major html/css breaker imo.
Here's a chopped up example after cleaning/tweaking the code considerably. There's still a thousand ways left to clean and refine it but at least now it looks more like what I suppose you wanted:
http://sotkra.com/stackoverflow/positionrelative/index.html
I stumbled upon this article
http://www.thefloatingfrog.co.uk/css/my-hatred-of-br-clearall/
When would one need to use that ?
Why is it evil ?
I don't understand the substitute syntax can you explain ?
Setting clear to both with not allow other elements to float on either the left or right side of the element. The class below is an easy way to add this anywhere.
.clear {
clear:both;
}
So when you want to clear something (that is, if you were to float the next element to the left, it would be below the current element and to the left, instead of left of it) you'd simply add the .clear class.
The problem with the following code is that if later on you decide that you don't want to clear everything after the 'something' class, then you have to go through your HTML and remove the br clear="all" wherever you have that 'something' class.
<div class="something">Cool content.</div>
<br clear="all">
<div class="other">Cool content again.</div>
Instead you could do something like this:
.something {
float: left;
}
.other {
clear :both;
float: left;
}
<div class="something">Hi!</div>
<div class="other">Hi again from below!</div>
That way if later on you decide to float all blocks with the 'other' class then you can just remove the 'clear:both;' from the CSS once.
I was about to post something snarky about you not reading the article, but when I saw that it was just a page of vitriolic rage with no explanation, I figured I'd answer.
It's because there are better ways of doing what you want to do -- namely, by using CSS in the way he does in the article, he has separated the semantics of the elements he's displaying from how he's displaying them. Why is this a big deal? Well, for one, he can more easily transform how his page looks when it's shown on different platforms (mobile, desktop) and media (screen, print, a screen reader for the blind), simply by editing CSS and not having to touch the document itself. This feature of CSS is pure gold.
On the other hand, if you use a construct such as this, you put in a hard constraint about your document's presentation that sticks around no matter what media or platform you're dealing with. What makes him so mad? Because once a developer has come in before him and used <br clear="all">, he has to take it out in order to get the benefits I just mentioned. That's why it's so frustrating. One bad developer can disable a whole host of development scenarios for every other developer who comes after.
As far as CSS goes, I have to say that it's a very difficult subject to just pick up without reading all about how it works. It's hard to explain how the clear attribute works if you don't understand floats. I had quite a hard time myself until I bought a great book on the subject.
When you have floated elements, the parent element can't calculate it's dimensions effectively and sizes incorrectly. Other items that follow floated items may also sit out of position. By clearing an element at the end of your floats, you correct alter this behaviour.
EDIT
Actually correct is probably the wrong word to use as this is what is supposed to happen and using the word correct suggests it is broken.
The author is just going off on a crazy rant about how the same thing can be accomplished using CSS on the DIV elements themselves. He's saying that br class="clear" is unnecessary.
It's also not a good practice because it mixes content with presentation. If a web designer wanted to re-theme the web application, he or she would need to modify the HTML to pull out all of the br clear elements, whereas if this was done as the author suggested, then the CSS files could be swapped out independently of the HTML, making their jobs easier and giving them one less thing to rant and rave about.
The rant is of course justified, as these simple, silly lines of code can actually cause a lot of headaches.
The idea is that your markup describes the information, and the CSS formats that information.
A dummy tag to clear floats isnt semantic, as it's only purpose is for layout reasons. There are other semantic ways of clearing floats that keep this separation. As commented below but here for clarity this is a good resource for semantically clearing floats http://css-tricks.com/the-how-and-why-of-clearing-floats/