I am going to have to link to an external website as I am having trouble reproducing this issue in JSFiddle.
For some reason accessing my page with an URL fragment corresponding to an ID that exists on the page appears to pull up certain areas of the document, the behaviour is not reproduced with a non-existant ID. There is no JavaScript on the page which could be causing this behaviour.
This behaviour is consistent in the following (so is unlikely to be a browser bug):
Google Chrome 31
Firefox 21
Internet explorer 8
Live view (accessed: 19/12/13) Issue resolved - see graphic below:
This is the page as it should look: http://sixplusfour.co.uk/encyclopedia/
This is the page with the named anchor: http://sixplusfour.co.uk/encyclopedia/#pagelist
The error is shown side by side in the following image:
Does anyone know what could be causing this behaviour?
My guess is that the :after pseudo-class of #pagelist is causing this. I have no clue why this is happening but the display doesn't seems to load properly.
This pseudo-class seems like a quick fix. You might want to delete this pseudo-class and fix the real problem. Try to add a overflow: hidden to your wrapper so its floated contents keeps in the flow:
.col-group {
margin-left: -1em;
margin-right: -1em;
zoom: 1;
overflow: hidden; /*new line*/
}
I can not test it on reload, but this should work.
Update
The real problem is probably because the the base-line is shifting based on its font. It contains a dot as content. Now this is still not clear why this happens when redirecting. However i suggest to you a empty content for this:
.col-group:after {
display: block;
visibility: hidden;
height: 0;
clear: both;
content: ""; /* removed dot */
}
This should work without modifieng too much.
If you set overflow: auto; on #container you start to see why the problem occurs. The contents of #container are actually taller than their container. When the URL fragment is in place, the browsers are scrolling within #container to reach it.
(I haven't yet figured out exactly why, but hopefully this will point you in the right direction.)
It is probably linked to a :focus or :hover selector.
I see this code in your style.css :
.pagenav li a:focus {
outline: #114d74 solid 1px;
outline-offset: -1px;
padding-left: 0.5em;
}
Couldn't this be a different value of padding or outline that makes things change?
Related
I have integrated Google One Tap into my website. The login process works well on desktop, but on mobile, there is a horizontal scroll after logging in. It's also important to note that the direction of the website is right-to-left.
Following a user's sign-in, Google adds an empty <div> with the ID "g_a11y_announcement" at the end of the <body>:
It has the following CSS attributes:
#g_a11y_announcement {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
I get a blank screen right after signing in because of a 10,000 pixel overflow:
Unfortunately, I can't share a link to my website, but taking this element out of the DOM removes the scrollbar.
There's no documentation on this <div> or how to tell Google One Tap that the page is right-to-left. The only solution I can think of is to override the CSS, but I don't want my application to be blocked by Google.
#g_a11y_announcement {
display: none;
}
What is the purpose of this <div>? Is there another solution that I am missing?
I have same problem like you, I resolved for first moment this problem on next way:
after logout I redirected on login page by window.location, I know thats not right answer for this problem but that will resolve for first, problem is because in this solution app will refresh
Rather than hiding the div completely, I moved it to the right when the page direction is right-to-left. The solution below uses the SASS parent selector to check the direction.
#g_a11y_announcement {
[dir="rtl"] & {
left: auto;
right: -10000px;
}
}
The only downside to this solution is that it could break if Google changes the One Tap implementation.
Alright, I've been working with html/css for nearly a decade now, and for the life of me, I just can't seem to figure out why this won't work.
Initially, I was having trouble getting two separate divs to have display: none along with other properties, on page load. After troubleshooting I ended up with the conclusion that it was something wrong in the bootstrap files, so after over an hour of reducing, I simplified it to the following to remove all possible sources of error:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#first {
display: none;
}
#second {
display: none;
}
</style>
</head>
<body>
<div id="first" >abc</div>
<div id="second">123</div>
</body>
</html>
I saved this as test.html and opened it through firefox only to see:
123
I check with 'Inspect element', and sure enough, #first has the property "display: none" but #second doesn't.
I proceeded to check this with chrome and edge and got the same results.
I found that using
#first, #second {
display: none;
}
works as expected. However, I still need to add other properties to #second, thus, thinking myself clever:
#first, #second {
display: none; <!--Awesome!-->
}
#second {
height: 100px; <!--nope-->
width: 100px; <!--nope-->
}
After much repetition in an effort to get any different result, I ended up trying something that has absolutely no reason to work what-so-ever, but at this point, I stopped caring.
I proceeded to open a new document, type out the entire original <style>...</style> (from first code block above) and copy it from the unsaved document and paste it over the faulty one.
Refreshed the page, saw nothing. Checked Inspect Element, sure enough, everything was there, just with "display: none"
So my question(s) after nearly 3 hours of troubleshooting, are:
What happened?
Why did it happen?
Extra info:
Windows 10 Home 64-bit
Application:
Visual Studio Code
There is a strange character in your CSS, which can be seen when pasting the code into jsfiddle:
Remove that, or paste the CSS below:
#first {
display: none;
}
#second {
display: none;
}
<div id="first">abc</div>
<div id="second">123</div>
I noticed that in your <style>, there are strange characters showing in the Firefox Style Editor, right after the closing } of #first {. I am guessing that this confused the browsers to not process #second at all.
Weird though that these characters (shown as ​ in Firefox) don't show up in my text editor either...
...replacing the line with the } with a newly typed one solved the problem however.
Been there!
I tried your examples by copying/pasting to a JSFiddle and in fact you have extraneous characters after the #first closure bracket.
Just get rid of that char, and you're done. Might be a good idea to check your text editor. I always enable invisible characters while coding, to prevent these type of issues.
What is actually happening is that the browser CSS processor dies after the #first closure bracket, and nothing after that is processed. Thats why #second does not seem to work.
https://jsfiddle.net/sbnyg2ev/
#first {
display: none;
} <--- just delete that char, is not a space.
#second {
display: none;
}
I have a page which generates a phone number in HTML, like this:
<div class="phone">01987123456</div>
What I want is to simply put a space inside the number, like so:
01987 123456
The generated number and HTML will always be the same, but I only have access to client side code (HTML / CSS / Javascript / etc).
I want to find a way of achieving all of this without using Javascript if possible, so Ideally I am looking for an answer in CSS or HTML.
I'm pretty sure this could be done fairly easily in Javascript, but the client wants to make sure the phone number is formatted correctly even if Javascript is disabled (don't ask).
I want the most effective and efficient way of changing the number to what I want. If someone can figure out how to add brackets to the number (like this: (01987) 123456) as well as the space using just CSS/HTML you will immediately get marked as correct as well as my eternal gratitude.
EDIT:
I get that CSS is for design, Ive been a web developer for 15+ years. I could really do with a CSS hack to produce what I want, and explaining to the client the basics of web design is unfortunately not an option (they think they know better and I am in no position to dictate anything to them). I'm in a bit of a nightmare situation, and I need your help!
I know that content can be added to a page with CSS using content. I am aware of the ::first-letter method that #gillesc mentions in the comments. I was hoping something like this might help me.
The client uses modern browsers so a CSS3 solution would be fine.
And no, I cant change the outputted HTML.
I was interested to see if this could be done with CSS, even if it shouldn't be done! The following is quite hacky, ideally the phone number would be formatted server side or, if that isn't an option, with JavaScript.
A few caveats:
This requires an attribute to be added to .phone for the pseudo element to use. This may or may not be a deal breaker given that you seem to have limited access to the HTML
If the phone number is not in a suitable format (e.g. something like 01 987123456) it will not display correctly
A nasty little hack is used for IE as it doesn't calculate the width of the pseudo element correctly using ch for some reason. Credit to SW4 for this: https://stackoverflow.com/a/20541859
A solid background colour is required
The general idea behind this is as follows:
.phone
text-indent: 1ch; on .phone moves the whole text to the left by one character
.phone is set to position: relative; to allow the pseudo element to be positioned relatively to it
white-space: nowrap; ensures that this doesn't wrap onto a new line if there is a break in the number
.phone:before
background-color: white; masks the digits in .phone
border-right: 1ch solid white; hides the sixth digit in .phone, in effect this is the space
content: attr(data-phone); uses the data-phone attribute on .phone to populate the pseudo element with the same number
left: 0;, position: absolute; and top: 0; are used to position the pseudo element
overflow: hidden; hides any characters over the 5 character limit
text-indent: 0; resets text-indent: 1ch; set on .phone
width: 5ch; ensures that the pseudo element is only 5 characters long
The weird media query is the hack to target IE
Tested and working in FF 38.0.5, Chrome 43.0.2357.124 m and IE 11. Browsers not supporting the ch unit (such as Opera 12.17 and Windows Safari 5.1.7) seem to show the phone number in its natural state.
.phone {
position: relative;
text-indent: 1ch;
white-space: nowrap;
}
.phone:before {
background-color: white;
border-right: 1ch solid white;
content: attr(data-phone);
display: block;
left: 0;
overflow: hidden;
position: absolute;
text-indent: 0;
top: 0;
width: 5ch;
}
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
.phone:before {
width: 5.8ch;
}
}
<div class="phone" data-phone="01987123456">01987123456</div>
JS Fiddle: https://jsfiddle.net/scarjnb1/
It's not possible using CSS, just JavaScript. Then it'd be:
<div id="phone">01987123456</div>
<script>
var el = document.getElementById('phone');
phone.innerText = phone.innerText.replace(/^(\d{5})/, '($1) ');
</script>
I haven't touched anything, so I think it may have been a chrome update that happened recently. But my menu, which is div with nested ul's, randomly loads invisible.
If you open developer tools (F12) and mess with any of the css, it automatically reappears. I can add a style that is completely invalid css, just make stuff up, and the menu will re-appear.
Can anyone help me find what is causing this?
I'm on Chrome 33.0.1750.146 m
My guess is that your menu CSS or JS is improperly setting the heights of all the parent ul elements to height: 0. Upon hover, they expand.
Take my comment above to heart and restructure your menu with a single top-level ul, and make sure you're only hiding ul ul on load.
You might also try setting z-index on those top-level ul elements instead of their children:
#navbar ul {
position: relative;
z-index: 1;
}
This is your cuplrit. In css mc_grid3.css:
There is :
.container:after, .header:after, .header-bottom:after, .navbar:after, .main:after, .content:after, .content div:after, .subcontent:after, .subcontent div:after, .footer:after {
content: ".";
display: block;
height: 0; // Remove this
clear: both;
visibility: hidden; // Remove this too
}
Or remove .header-bottom:after from the above css rule.
Thanks for the input guys. I understand some of my html is bad, and I will take your advice to clean it up. However like I said, everything worked fine until recently w/ no code changes.
I decided to rip out the entire menu and replace it w/ modern html/css and in doing so, I discovered the problem. I was using font 'FuturaMedium' as my menu font, and the latest update to Chrome 33.0.1750.146 introduced some bugs with fonts. So even my brand new css menu wouldn't work with that font.
For now I pulled the font and I will figure out what I need to do to fix it. Again, thanks.
Link to bug
I have a WordPress site in development that seems to have a CSS issue that I cannot find. I installed the plugin AJAX Event Calendar and dropped its shortcode [calendar] in the page editor. That works as intended, but there is something pushing the calendar down somewhere in the neighborhood of 400 plus pixels. I've checked all containing divs, and the calendar divs as well. I also see no errors in the console. I just can't seem to locate what's pushing it down.
The page in question can be seen here.
in your custom.css file fix this:
#aec-container {
position: relative;
float: none;
}
with this:
#aec-container {
position: relative;
float: left;
}
i tried and it works.