I made this website for my dad's business and you can see a contact form if you scroll a bit down. I'd like us to go to the Mobile View of the page through Google's DevTool (F12 and then Ctrl+Shift+M; or left besides "Elements"). I will show you what's wrong.
If you go to where it says "Treibstoff", try selecting the 4 different options. You will notice that you can't select the bottom two, "Diesel" and "Elektro".
Well, you can actually. If you press slightly above of the end of the word, but you can't select it like one usually does.
If we inspect the elements (Ctrl+Shift+C), we see that the box of "Typenscheinnr." is overlapping "Diesel" and "Elektro" (Inspect a bit above "Typenscheinnr.", not directly on it). A fix I found for this is: Inspect click the big overlapping box of "Typenscheinnr.", scroll down under Styles until you see that multilayered box, set upper margin to 45 with doubleclick.
This should fix it, but I don't know how to make this change go live. I did some research and all I got were solutions similar to "do !important" and then some code. Those were also for the whole site or something like that ...
Anyway, any help would be appreciated and I'm again sorry if this question is stupid. If there's more information you'd like to know, by all means just ask me.
Thanks for reading!
Just use clear: both
If you place a <div style="clear: both"></div> right before the end of the Treibstoff: <p> tag, the behavior will be the expected one.
This happens because you are using float
Related
Since I can't really figure out where the problem is the cite is here
I'm sure most people know ctrl-u will allow you to see the coding.
The scroll bar should move the content in the box.
Any suggestions are helpful but please don't be rude
The scrollbar is transparent but it should wok like the one on this page
Based on what I'm currently seeing - your problem is that you have two separate <div id="entries"> divs. The second one (line 1060 of your compiled source, as I'm seeing it in Firefox) is blank - it contains an empty <div id="post"> and nothing else.
id properties have to be unique - because this one is repeated, the style attributes aren't being applied to it correctly. Simply delete the second <div id="entries">, and your scrollbar will work.
I'm working on a web project. In the last two weeks I was having my semester examinations so I'd to take a break from it. Now, since they are over, I've resumed my work; but I find that some of my web elements (like button,span) have shifted by some pixels on Chrome (not on IE and Mozilla). What could be the reason behind this? How do I overcome this problem?
ORIGINAL CODE: http://jsfiddle.net/p22L15vs/15/embedded/result/
The left margin (for button) for chrome was originally:
-webkit-margin-start:620px;
Now the same code causes the button to enter a new line.
Another example of span:
ORIGINAL CODE: http://jsfiddle.net/vbpasx1j/
The text shown in the fiddle was placed in a span tag. Two weeks ago it required only two lines. Now it requires three lines.
Hello and welcome to the community!
First off, in your provided link the -webkit-margin-start: of the button is set to 620px, not 166.
That, combined with the width of your menu div <div id="div_element"> as well as the padding around your elements exceeds your original #wrapper width of 1006px, making the button element jump to the next row.
Here's a demo to a top-of-my-mind solution: http://jsfiddle.net/kqxmbcdt/
Reduce the -webkit-margin-start: to 619px and you're good to go.
Always be on the lookout for unaccounted margins and paddings when positioning elements, as you can see, sometimes 1px is all it takes to break a layout.
This is to due the headline change in Chrome 37 ,the introduction of DirectWrite support for Windows.
Check this link for further details:
http://www.omgchrome.com/google-chrome-37-arrives-improved-font-rendering-windows/
This feature has caused a similar issue for various developers.
In order to restore to your previous font, the solution is to disable this new feature in your browser. You need to follow the following steps:
1> Enter chrome://flags/ in your address bar.
2> In the Disable DirectWrite Windows section click on Enable (actually disables it).
3> Click on Relaunch Now at the bottom.
4> Restart your browser.
Your original page design remains unchanged. :)
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I am helping to maintain this website http://www.groupme.my/national/
For certain deals with a long list of options, when you click on the "Buy now" button, the options list popup will be partially covered by the deal below. For example, click on the "Buy now" button for this deal "[55% off] Korean Style Handbag...".
Please note that not every deal comes with options. If there is no options, clicking on "Buyw now" will bring you to the shopping cart directly.
I have tried to put in z-index, but it doesn't seem to do anything.
Please help to check how we can resolve this problem. Thanks.
If I understand your concern correctly, the element that fades in has a bottom edge that is behind the item that is beneath, right?
If this is the problem then z-index isn't going to help you because the thing that is fading in is being attached to a div (and it IS going above it) but it is going to be behind the div that sits on the page *after the one that the fading one is being attached to, so, the fading div is going to be behind the next one, no matter what.
The easiest way to deal with this is to draw them in opposite order, so that the divs are moving towards the zTOP as they go up, or to put it another way, set their z-order in reverse order to how they're drawn, so if you have 10 items, the first one will have a zIndex of 10 and the next one 9 and so on.
The z-index: 0 in content-wrapper-top seems the problem ; try to remove it.
EDIT added after comment : I found this z-index in the generate CSS (line:713):
.content-pane-index {
float: left;
width: 737px;
position: relative;
z-index: 0;<------------------------ HERE
}
Dr.Dredel explained the problem well, but if you don't want to do any reorder HTML, I have a workaround, maybe will be little stupid, but I think it should work anyway, I'll give you idea, I don't have any code to test any code :)
First, your z-index must not have that huge numbers, like 1000 then 50000! use smaller units like 5 10 15 and so, my code will work if you did that first, I used the largest number that must be on the page.
I'll use jQuery, for Buy Now button, add this code after show pop code:
$(this).parent().parent().parent().parent().parent().parent().css("z-index","999");
This code means find parent if buynow a tag and parent of the parent of a tag and so to div that have content-pane-index class name and add z-index for max.
you maybe can use this code instead too:
$(this).parents(".content-pane-index").css("z-index","999");
for close button you need to restore z-index that you added before, so add this code too after closing pop code:
$(this).parent().parent().parent().parent().parent().parent().parent().css("z-index","0");
or
$(this).parents(".content-pane-index").css("z-index","0");
I hope you got an idea at least :)
My code maybe need fixes like add or remove one .parent() method, or change selector that used with .parents().
I Love workarounds :P
if you want to show popup remove z-index from your popup CSS, for ex. I'm using z-index: 1000 in the other css
But I'm using other CSS for popup so go in popup CSS & find z-index and remove it.
I've very new at this. I appreciate any help I can get with this. I haven't found an answer on the internet yet. (At least, not one I understand!)
When I use blockquote in WordPress, it shows up on the right side of the screen. Sometimes, I want it to appear on the left side of the screen. How do I do that? Here is the blockquote (below) I'd like to have on the left side of the screen. It currently appears on the right side of the screen.
<blockquote><p>Living a better life is less about things and more about being thankful.</p></blockquote>"
As the respected members said above, also if you have a plugin such as firebug on firefox or in your chrome browser, right click the blockquote and choose "inspect element". Then you will see all the rules(i.e effects) applied to that element and you can show/hide them to see their effect on the element which will give you a better understanding of what the rules are doing to your element.
Cheers.
<blockquote style="text-align:left;">Test</blockquote>
This will change it on a quote-by-quote basis.
A better solution is to open your theme's style.css file, search for blockquote, and replace the text-align:right; with text-align:left;. This will change the behavior or a blockquote site-wide.
What happens if you wrap up the blockquote element in it's own div element? Such as this:
<div>
<blockquote>
<p>Living a better life is less about things and more about being thankful.</p>
</blockquote>
</div>
You would then possibly be able to control the blockquote as a div block element using float:left, setting the width larger so that it gets moved below any elements to it's left, or using other means of absolutely positioning it.
For the theme that I am using, Twenty Fourteen, the correct answer would be to use:
<blockquote class="alignleft">This is my quote</blockquote>
I found this by using the Chrome devtools to inspect the example on the demo. Since this theme has a special class with nice formatting for the aligned blockquotes it is better to use this than to override the CSS with style settings. Note that while inspecting the element you get direct links into the CSS that can be used to check which other classes the theme has - quite useful! You may need to read a bit about CSS syntax to interpret it though.