Since I'm fairly sure this is an instance of the XY Problem I'm going to start with the Y. I have an image that's 300px wide, and I want three links underneath the image, flush against it. The last link needs to grow in size to fill the remaining space.
Now for the X. The markup I have works perfectly in Chrome and Firefox, but in IE and Safari the third link is 2px too large.
For your copy/pasting pleasure:
<head>
<style type="text/css">
.breakfast
{
text-transform: uppercase;
padding: 10px 25px;
margin: 5px -5px;
font-family: Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;
background-color: #d9e021;
color: #00add0;
text-align: center;
text-decoration: none;
display: inline-block;
}
.breakfast:hover
{
text-decoration: none;
background-color: #bdc400;
color: #0198b6;
}
</style>
</head>
<body>
<div>
<img src="my_awesome_image.jpg" width="300"
height="190" alt="My awesome image." />
</div>
<div style="margin-left: 5px; margin-top: -5px;">
<a class="breakfast" href="#">BOSTON </a>
<a class="breakfast" href="#">CHICAGO </a>
<a class="breakfast" href="#" style="width: 38px;">DC </a>
</div>
</body>
Or a jsFiddle, graciously provided by Mr.Lister.
So the final link, "DC" sticks out beyond the image by 2px in Safari and IE. If I shave off 2px, it's too short in Chrome and Firefox. I also tried adding padding to the left and right of the link but same deal.
Here is another fiddle, that works in all four browsers. And opera, for good measure.
I did have to give width:290px to the container div and width:33px; float:right to the last a.
http://jsfiddle.net/MrLister/pX6S7/13/
Still not sure though why this works, while the original doesn't. Sorry. Oh, and the widths may sound random, but that is caused by the 5px and -5px margins. They do add up.
I made a fiddle for you
http://jsfiddle.net/5ve6U/3/
Dont be confused about the different width/height of your image container in this fiddle, i made it only, to see the full width with the help of a border
only resetet the body margins/padding and change your /padding/margin
.breakfast {
padding: 10px 24px;
margin: 5px -3px;
}
it works fine for me in IE
Related
I am a new user working on a website. I have taken several udemy classes and made one website that went well. I am now looking to make a second and I am running into an odd problem: some changes to the CSS header tag have an effect on the header in my index page while other changes do not. For example changing the background color does have an effect, while anything to do with flexbox or padding simply does not cause any change. I am writing this after several sittings and going back to my previous website, hoping someone can help me out. Here is the snippet of my header and the snippet from the css. The code works in the snippet here, but not when I preview! I am using dreamweaver.
header {
display: flex;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
justify-content: space-between;
}
.navButton {
border-style: solid;
border-width: 3px;
border-color: white;
color: white;
font-family: 'Source Sans Pro', sans-serif;
padding: 11px 25px;
display: inline-block;
margin-top: 10px;
border-radius: 2px;
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
position: relative;
}
<header>
<div class="logo">
<img src="Images/smaller GGR Logo.png" width="203" height="114" alt="Gas Guzzler Reviews Logo"/>
</div>
<nav>
<div class="navButton">About Us</div>
<div class="navButton">Contact Us</div>
</nav>
</header>
My main goal is to have the logo on the left and nav buttons on the right, any help is appreciated!
Temani Afif helpfully pointed out the code was working in the snippet. I realised I made an edit from when it did not work in the snippet when I first tested it. I had a CSS Reset after my regular CSS sheet screwing everything up. Thank you!
Mmm, you should check the CSS specificity in your code because your code snippet is working just fine to me.
Here is the changes I made to test it.
CSS changes:
.logo {
margin-left: 30px;
}
.contact__button {
margin-right: 30px;
}
HTML changes:
<div class="navButton contact__button">Contact Us</div>
I am having this issue for chrome (Mozilla works fine) when I float:right a specific span the text within shrinks. This is only happening on the responsive design mode in chrome, but it also occurs in live mobile version.
There may be an overarching issue. In the first photo, the icon and text is squished together, and this doesn't happen in firefox or in regular chrome.
Here is a picture without the float right.
Here is a picture with float right
Here is the abridged HTML
<div class="post-footer">
<span class="tag"><i class="fas fa-tags"></i>music</span>
<span id="date" class="tag"><i class="fas fa-calendar-plus"></i>June 7th, 2018</span>
</div>
Here is the CSS
.post-footer {
padding: 15px;
}
.post-footer .tag {
border-radius: 200px;
background-color: #c0392b;
color: white;
padding: 5px 15px;
font-weight: 500;
}
.post-footer .tag i {
padding-right: 10px;
}
#date {
background-color: #27ae60;
float: right;
padding: 2px 12px;
}
Any ideas to why chrome is acting this way? Is there a wiki or guide to common browser bugs?
EDIT: The site seems to work fine on an iPhone in safari and chrome. It does not work a S9 with Chrome.
The complete code can be found here
I have a drop down box with text and an inverted triangle on the right end.
I am seeing a problem on my local browsers, both firefox & chrome where the triangle is aligned towards the top. It looks like,
I am not seeing such a problem when i run the code on jsfiddle. Check here..
I am using line-height property to align vertically as,
.fa-caret-down{
line-height: 40px;
}
.btn-text{
line-height: 40px;
}
Why does my local browsers behave differently? And is there a way i can move the icon to middle?
Isn't default font line-height overriding your 40px one? Try line-height: 40px !important; and check result. If not, post screenshot from inspector with this dropdown properties shown.
I don't know why your local browser doesn't show the right design. Inside my firefox 45.0.2 everything is fine.
Are you shure, that your code is equals?
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css">
<head>
<style type="text/css">
body{
background-color: #e3e4e5;
}
.drp-down-btn{
margin: 20px;
height: 40px;
background-color: #fff;
display: inline-block;
padding: 4px;
width: 150px;
}
.fa-caret-down{
line-height: 40px;
}
.btn-text{
line-height: 40px;
}
</style>
</head>
<body>
<div class="drp-down-btn">
<span class="btn-text"> My caption</span>
<i class="fa fa-lg fa-caret-down" style="vertical-align:baseline;float:right;"></i>
</div>
</body>
</html>
I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
I'm working on a personal project, but I'm having some difficulty with a div, which has some styling that I can't seem to get around. It's a thin strip at the top of my user interface, where users have a few controls over what's shown on the screen. Pretty important to keep around (so deleting it isn't an option). In case it helps at all, I am using Eric Meyer's CSS Reset as a normalizer.
My problem is that the div element seems to have some intrinsic margin or padding that I can't seem to work around in my css. I've included a photo here for reference; the div is in green.
I need to make that green div element thinner. It would help the layout a lot if I could move it closer to the top of the page. If you have any ideas or see something that I've missed, I would appreciate the help.
I'm also including the html code for that content as follows:
<div class="new_entry_control_container">
<p>You have <span class="credits">33 Credits</span> remaining.
<span class="button">Add More Credits</span>
<span class="button">Add More Items to Study List</span>
<span class="pagination">< 1 | 2 | 3 ></span>
</p>
</div>
As well as the CSS that applies here:
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;}
div.new_entry_control_container p {
text-align: center;}
.credits {
color: #ffd400;}
.button {
background-color: #ffd400;
color: #3a0091;
border: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 1px 8px 4px 8px;
margin: 10px 0px 0px 3px;}
.pagination {
margin-left: 25px;
font-size: 17px;}
Not sure if it's caused by the padding of parent element of that green bar. A workaround would be using negative "margin-top". And to make it thinner (assuming there would only be one line in that bar), use "height" combined with "line-height".
So the css might look like this
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
height: 18px; line-height: 18px;
}
Hope that helps.
Try:
div.new_entry_control_container{
padding:0;
/* more CSS here */
}
.credits{
padding:0; margin:0;
/* other CSS here */
}