I developed a website in drupal. But there is one last problem before I can put this production.
URL for my test page is test url here
Let me explain the problem in images.
CSS looks good chrome and below screen shot of image when loaded in Google Chrome.
chrome screenshot
When I load the page in IE8 there is huge space between post title which is html header2 and teaser which is html paragraph.IE8 screenshot
Can you help me remove this space between teaser and post title.
field-item{
display:inline;
}
remove the display property.
thought id post the solution rather than in the comments
Remove
display:inline;
and / or
padding-left: 5px;
from .field-item
I have tested it on IE 9.. And this is a bit of a guess but I tried to alter the p-tags margin-top to -15px so I guess that IE forces styling to the p-tag.. I think I would try to change it to a div.
<div style="vertical-align: top; background-color: red;" class="content">
<div class="field field-name-field-thumbnail field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img alt="" src="http://techmasti.forwardsfarm.com/sites/default/files/styles/thumbnail/public/5657048733_9ecb8bff8e_b.jpg" typeof="foaf:Image"></div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div style="margin-top: 0px;" class="field-item even" property="content:encoded"><p style="margin-top: 0px;">We start with customizing the appearance using an existing theme. You may be surprised how customizable an existing theme can be simply by changing a few settings. From there we discuss ways to make your own theme based on an existing theme, and then show you how to tweak it through the use of CSS stylesheets.</p>
</div></div></div> </div>
hope it's helpful eventhough its a guess :-)
Related
We run a site with WordPress and use a template for our design.
On our homepage we have a scroll of our blog posts that includes a title, author/post info, reading time and an "excerpt"?
We're trying to get rid of the "excerpt"
blog-post-content-list-sider is the div and the text is just a #text within.
Everything I've looked up is something like .blog-post-content-list-sider { display: none; } but that would hide the entire thing not just one aspect of it (if I understand correctly)
This is the code for 1 blog-post-content-list-sider
The part that starts with "A Cutting-Edge" is the text that I need removed from each post on our page.
<div class="blog-post-content-list-sider">
<div class="textalignleft subtitle_post_standard">
Artificial Intelligence Emerging Technology Medicine</div> <h3 class="title_post_standard"> AI: The Key to Fertility Treatment? </h3>
<div class="fancy_one ig_meta_post_classic textaligncenter">
<span><div class="indie_author">By <b> <div class="vcard author">
Sohail Merchant</div> </b>
</div><div class="indie_on">on </div><div class="updated indie_date"> <b> August 30, 2020</b> </div> </span></div>
<span class="rt-reading-time" style="display: block;"><span class="rt-label rt-prefix">Reading Time: </span> <span class="rt-time">4</span> <span class="rt-label rt-postfix">minutes</span></span>
A Cutting-Edge Discussion about AI’s Eminent Role in Reproduction Intro Artificial intelligence has been widely useful in the diagnosis and treatment of diseases. However, little has been discovered about its capabilities in the realm of fertility treatment. Well, all that is about to change because we will soon experience the first application of AI in […]
</div>
EDIT:
I tested this CSS code and it works. Codepen link here
Please try
.blog-post-content-list-sider{
visibility:hidden;
}
.blog-post-content-list-sider>*{
visibility:visible;
}
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
I have a SharePoint 2010 site and would like to use CSS only in the wikipage.
On my page I have a paragraph of information and at the end of it, has a question. After the viewers read the information and the question I would like them to be able to click on an image that says 'answer'. When clicking on the 'answer' image a text box comes up under the question with the answer. I would like the answer to stay on the page, not just hovering over the image.
My preference is to do this solely in css. I don't think I have the capabilities to do it in javascript.
I'm open to both options, I guess. If it is javascript can it be done inline?
Like mentioned by #JofryHS, css doesn't really respond to clicks.
Using inline js click handlers isn't great as it'll leave you having to repeat yourself a lot, but from the sounds of things you're fighting against not having enough access to Sharepoint (sigh, corporate networks).
This uses an inline click handler to show the answer:
<div class="question" id="q1">
What colour is the sky?
<button class="answerButton" onClick="document.getElementById('q1Answer').style.display='block'">Answer</button>
<div class="answer" id="q1Answer">
Overcast and grey, because I live in the UK.
</div>
</div>
<div class="question" id="q2">
Why does it always rain on me?
<button class="answerButton" onClick="document.getElementById('q2Answer').style.display='block'">Answer</button>
<div class="answer" id="q2Answer">
I'd have thought you figured this out already... It's Britain, of course it always rains on you!
</div>
</div>
the answers are hidden using css (note the display:none inside the .answer block):
.answer {
display:none;
background-color:#e5e5ff;
padding:15px;
}
.question {
background-color:#f5f5f5;
padding:15px;
border-radius:5px;
margin:7px;
}
Essentially, all the onClick does is change the css of the answer from display:none to display:block, rendering the answer visible.
There's also a tad of css to make it look shinier, and here's a demo jsfiddle
I am using the Facebook Like social plugin on my website, and every time the page loads, the plugin stretches the height of the div it is in until the plugin has loaded.
I did define the height of the div that the social plugin is in, but even though the height stayed the same, you could still see the shift. I am also using the Twitter and Google plus social plugins - this makes the shift more noticeable since they get shifted also (shift under the h3 heading).
.socialBookmarks {margin:30px 0;padding:5px 15px;overflow:hidden;}
.socialBookmarks .social-wrap
{display:inline-block;vertical-align:middle;}
.social-wrap .ezimageBox {float:left}
<div class="socialBookmarks">
<h3 class="inline-block">Share:</h3>
<div class="social-wrap clearfix">
<div class="ezimageBox">
(loads twitter social plugin)
</div>
<div class="ezimageBox">
(loads google plus social plugin
</div>
<div class="ezimageBox">
(loads facebook social plugin)
</div>
</div>
</div>
Anyone have any ideas on how to work around this problem? :)
Setting the width and height of the wrapping <div> (in your case, .ezimageBox) usually does the trick for me.
Try this:
.social-wrap .ezimageBox {float:left, width:100px, height: 20px; overflow:hidden;}
Does it still flicker?
Has anyone noticed a change to the rendering in the latest Chrome on Windows (22.0.1229.94 m)?
On page
http://worldwide.espacenet.com/
we had until recently (and have in IE8/9, FX16/17, Safari 5)
and in Chrome (22.0.1229.94 m):
The CSS starts with YUI Reset CSS version: 2.5.1
Here is the relevant html
<div class="epoBar epoBarAction">
<div class="secondary">
<div class="epoBarItem">
Clear
</div>
<div class="epoBarItem epoBarItemForm">
<div class="formElement">
<span class="inputsubmit">
<input type="submit" class="submit" name="Submit" value="Search">
</span>
</div>
</div>
</div>
</div>
Weird behaviour: If I inspect element and toggle the float:left below twice, the buttons align as they should
div.epoBar div.epoBarItem {
float: left;
min-height: 1.67em;
padding-bottom: 0.42em;
}
Also if I add width:150px to the div with class="secondary", it also aligns.
Is there anything obviously weird or is there a known new bug I have missed in Chrome?
Hope someone will be so kind and inspect the page
Font rendering
Google chrome renders fonts differently to other browsers on windows to allow it to install without needing admin privileges. A pain, I know, but they outweigh ease of install over needing admin rights for antialiasing. That said, the font may be overflowing the width of the container you are putting it in, and should fixable by adding a larger width to the container, or removing it entirely. Also using ems rather than px will give different font sizes across browsers.