I'm having a weird problem with a section of my site.
on an h2 tag, I want to use the CSS ellipsis property
whenever the text is overflowing the screen size.
Now, this is a repetitive section I am using on this page - and the only difference is the font applied to the h2 tag - so I know the CSS style I am using is good
(overflow: hidden, text-overflow: ellipsis, and etc...)
Can anyone help me find what is the problem?
here is a screenshot of the section that is working the right way:
here is a screenshot of the section that is not working the right way
You can visit the site at -
https://www.hacollective.com/
and test in mobile size in order to see the difference.
The id of the part with the h2 problem is "col-221542828"
Thanks in advance,
Shahar.
The problem with missing ellipse points lies in the font specified for this h2 - font-family: tzur,sans-serif!important.
Here:
.font-tzur {
font-family: tzur,sans-serif!important;
}
Which are loaded from the font-load-tzur.css file.
Check the correctness of loading this font tzur.
For example - If you put a different font, the ellipse points will appear.
Related
I have an intractable, at least for me, HTML/CSS problem. Here is a bit of a web page I'm currently developing:
(The whole page is here: http://www.professorbrown.net/ but has now been changed as suggested in the accepted answer.)
Note that the "fine print" at the bottom has the same line spacing as the body copy, and I can't fix it. It looks the same in Chrome, Firefox, and Edge, so it has to be an error in my work.
The CSS is: .fine {font-size: 1rem; line-height: 1.1;} The markup is <span class="fine">.
Using the inspector function of both Chrome and Firefox shows the computed CSS for font-size as 10px, which is correct, and the line-height as 11px, which is what I intended, but clearly not what's displayed. Measurement says the displayed line height is about 32px, which is the same as the body copy above the fine print. Margin, border, and padding for the fine print are all zero. HTML and CSS validate using validator.nu and Jigsaw. There are style sheets from Skeleton, Superfish, and Slick linked in. I've commented them out one by one with no change in the error.
Please tell me what I've done wrong or give me some help with further debugging.
(Note: This is still a development project, so TLS is not enabled and the images have watermarks because I haven't licensed them yet. I know both things must be done before "production.")
A span won't take on line-height correctly due to how its display property works if it is inside a div with defined font-size or line-height css. You can either change your span to a div or, you can add display:block to your .line's css class to change the display behavior.
e.g.
.fine {font-size: 1rem; line-height: 1.1; display:block;}
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
I'm building myself a website on SquareSpace and having a bit of trouble with the layout. I've built a few sites before so understand the concept of CSS, and how it's applied to divs etc...
So, I want the page to have full width images (edge to edge in the browser) interspersed with text and graphics.
The banner image and footer image look good, as you can see the image is edge to edge...
The problem is with any additional images I try to add (SS makes you add them inside 'image block' objects), currently it looks like this which is bad, and not edge to edge, shown here with red arrows...
I have spent hours googling about, and testing various solutions and nothing works. I also spent the last 30 mins with SS support and they suggested making a 'gallery page' which you can't add text to so that's totally pointless!
I tried to identify the CSS ID and apply CSS to the image, that didn't work either:
Can anyone help?
current CSS not working:
.sqs-block.image-block { padding: 0 !important }
body {
margin: 0 !important;
padding: 0 !important;
}
Cheers
John
I didn't find a programmatic solution to this hideous problem.
However, I was able to figure out a way to manipulate a SS 'index' style page to achieve the effect I was looking for.
On one of our websites, we use a font from typotheque.com by importing it as follows:
#import url( "http://fonts.typotheque.com/WF-XXXXX-XXXXX.css" );
The font is displayed correctly on Chrome and the like. In Internet Explorer 11 on Windows 7, the font is rendered, but the width of it is not correct. It seems as if the width of the text is rendered before the font is applied.
As a consequence, the text gets overlapped and the words are not wrapping accurately:
On Chrome, the font width is calculated and the words are wrapped correctly:
Other things we tried:
We followed the instructions here on typotheque.com
We made sure to link the css files prior to the javascript files, as stated here.
Any hints or pushes in the right direction to solve this issue are much appreciated. You can find the website here: http://www.claireundgeorge.ch/fr/
Edit:
Added word-break: break-all; : no change
Removed all the font-awesome-stuff: no change
When you compare what is calculated in FireFox with what is calculated in IE you can see whats the bad boy here.
In IE the padding-bottom property of the h2 is 4px.
When i uncheck this property it looks fine for me.
I cannot upload pictures here due to the stupid reputation limit thing but i hope i descriped it good enough...
I also have typotheque webfont + IE problem. My workaround for now is a bit dirty: I use jquery $(window).load to adjust element padding by 1px, and then IE redraws the font correctly.
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.