I'm building a header for my website. On the left side is a logo which has an underline at the bottom of the image. I then use another image underlaid to continue this underline to the right side of the screen. You can see at http://www.phoenixwebdev.com.au/.
The problem is that in Firefox the heights of the underlines in the two images are often slightly different. The two images are the exact same height, both pngs, both outputted from the same photoshop file. In Chrome, IE, Opera and Safari the underlines are always the exact same height. Below is an image with the artifact taking place.
These are the two images.
and
When changing the browser window size in Firefox, this effect will appear and disappear.
I've played with several aspects of css including height, max-height, position, vertical-align. I've also tried taking the logo out of it's containing <a> tag to no avail. The same thing happens when the non-logo image exists as a background of the parent element rather than an <img>.
Header HTML code:
<div class="top-info">
*top search bar code removed for brevity*
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style="">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.phoenixwebdev.com.au">
<img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-logo.png" alt="PhoenixWeb">
</a>
</div>
<div class="triangle visible-md visible-lg">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style="position: absolute; width:100%; height:80px;">
<ul id="nav" class="nav navbar-nav navbar-right"><li class="menu-portfolio">Portfolio</li>
*nav items removed for brevity*
</ul>
</div>
CSS is a bit complicated as this is WordPress and I am using a child theme. I can add this in later if noone has an answer without seeing it summarised here. If anyone can cast some illumination on the problem it would be much appreciated!
I cannot see the problem on my Firefox but you can try not to put line breaks after your <img /> tags as I know it sometimes adds unwanted and unexpected gaps.
The problem is a mixture of both your css and those two images.
Upon inspecting your site at the URL provided, it appears that you are scaling down the images to be 80px tall. The original height of these images is 295px and 295/80 is 3.6875. This causes the browser to have to calculate uneven pixels, which is where the problem is coming from. Ideally your assets should be the same height as what you are trying to show them at unless trying to accommodate retina devices.
I would suggest resizing the actual images in photoshop to be exactly 80px tall.
I found that what was causing the slight height changes was the fact that I was stretching the 'underline' image across the width of the header. It seems that in Firefox compressing or stretching an image horizontally has an effect on the way it is rendered in the vertical direction.
By replacing the underline image with an images as wide as the screen and doing no stretching, the two images lined up fine.
Related
When it's on the large screen, I have a navigation div which contains another five sub divs serving as five different navigation sections, like
I gave the navigation div class="d-none d-lg-block" so that this whole thing will only show at large screen and above and hide when it's smaller than the large screen.
However, on the smaller screens, I have created another div that contains some buttons which I hope they could toggle those navigation sections, like
when I click on Div1, I want the content Item1 and Item2 in Div1 to be toggled.
But just giving the section an id="div1" and class="navbar-toggler", data-toggle="collapse" and data-target="#div1" wouldn't make this happen. I also tried giving the div display: block when it's at a smaller resolution to no avail.
I have a fiddle here:
https://jsfiddle.net/chenhang91/u8b9cwmw/
What could be a good way to solve this problem elegantly?
Thanks!
In the provided code it's not possible to show a menu in a parent, which is hidden explicitly with a class .container.d-none.d-lg-block.
I suggest you restructure the whole html:
there's no need for extra submenu toggle divs .small-screen-div at all, toggling for submenus can be assigned to .nav-block-title. hence we move d-none.d-lg-block classes to the submenu themselves (changing d-lg-block to d-lg-inline-block accordingly)
<div class="nav-block-section">
<div class="nav-block-title d-inline-block ml-0"><a data-toggle="collapse" href="#div3">Div3</a></div>
<div class="collapse nav-block-navs d-none d-lg-inline-block" id="div3">
<div class="pb-2">
Item1
Item2
Item3
Item4
</div>
<div>
Item1
Item2
Item3
Item4
</div>
in this case data-toggle="collapse" need a small adjustment in css, to allow display switching no matter what media query is now.
#media (max-width:991px) {
.nav-block-navs.collapse.show {
display:inline-block !important;
}
}
Example
Okay, so I am a beginner but I've read a decent amount on this situation. But I'm trying to put my brand image in my nav bar.
I know it will be something stupid and small. I can always overwrite the style in the HTML but I'd prefer to have it done in a custom css file.
First things first, getting the obvious out of the way. My custom CSS file is the last css declared in the head. I am able to modify other elements on the page like paragraph element colors, so I know the CSS file is linked properly. I understand specificity, at least the core concept of it.
To try to tackle the specificity issue. I first made a custom id for my so within the tag I declared and in my CSS file I wrote
#logo {
height: 110%;
}
Nothing. So I tried being more specific and adding every single class declaration possible that could point to the logo file.
#logo .nav .navbar .navbar-inverse .navbar-fixed-top .navbar-brand {
...
}
again no luck. I tried just .navbar-brand and every single combination of classes. I just don't understand the hierarchy and who is taking precedence. My CSS file, if listed last in the header, with a properly Specified class declaration should overwrite any of bootstrap's code.
I know this question must get asked a lot but after hours of searching for the answer I haven't found it anywhere.
html snippet of the section
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img id="logo" src="images/logo.png" alt="Limit Magazine">
</a>
</div>
The thing is you are specifying the height in percentage, which requires the high of the parent element to be defined. In Bootstrap 3 the parent element of .navbar-brand is div.navbar-header and it has no defined height. For that reason height: 110%; does not work. So you need to define the height of the logo in pixels or define it in percentage and define div.navbar-header height in pixels.
Here is my jsFiddle with full code example.
I am trying to achieve the following to no avail:
I want the glyphicon-globe to appear centered and above the "Community" label (<h1>), and I want all three elements (the glyphicon, the <h1> heading and <h3> subheading) to be horizontally-centered in the middle of the screen
I want the "Community" label to appear with the correct font (see what happens when you remove the glyphicon...)
I have a feeling that the glyphicon is causing both problems:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1><span class="glyphicon glyphicon-globe"/>Community</h1>
<h3>A free online community to all new fizz-comers.</h3>
</div>
</div>
</div>
Perhaps this is malformed somehow or causing weird CSS rules to fire. Any ideas?
span tags shouldn't be self-closing. Here's a better explanation.
This updated example should style the heading and icon the way you want. By center aligning the text in the H1, the span inside it will also center (if set to display: block). The H1 will take the full width of the container element - setting it to display:inline-block is to make this example look better.
<h1 style="text-align: center; display: inline-block;"><span class="glyphicon glyphicon-globe" style="display: block"></span>Community</h1>
Most times when I'm using thumbnails the heights of the image are not uniform, as shown below:
<ul class="thumbnails">
...
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
</li>
...
</ul>
I have also created a simple jsFiddle showcasing the problem here: http://jsfiddle.net/c49Tk/
So, how can I force all of my thumbnails to share the exact same height and change their width, ignoring and maintaining the aspect ratio?
There isn't a simple answer to this one I'm afraid.
The way Bootstrap works, it assigns max-width: 100% to img. In the example you're sharing, they are all being retained by their parent's width (span4). In the same vein, the parents are getting their height from the image, so you can't even set the images to min-height: 100%.
If possible, you could resize these images server-side, although that's not exactly the answer you're looking for!
You could use JavaScript to force the heights of the images (although you would also need to force-remove the max-width property), but this would mean that you no-longer get the grid from Bootstrap that you're using.
I expect that with a little more JavaScript, you could:
Set the parent (either the anchors or the lis) to overflox-x:
hidden;
force the images to all be the same height.
This will mean that all your images are equal-height, but you would loose the right-hand edge of any images that are wider..
One final option would be to simply force the image heights and widths via CSS, although that would also mean that you would loose the image aspect ratio.
One good piece of news though: as long as you use class="row" or class="row-fluid", they will at least be cleared property, so if you have several rows of them you won't get nasty float-edge issues even if the images aren't equal-height.
You can use a CSS class to force it like
img { width: 200px; height: 200px; }
Well I have this code which is fairly simple and should set margin-top of HTML 5's button element to 1px when it is active ( mouse clicked on it). But what I get is a messed up layout, because the button does what it should do only it does it for both of the buttons which are right next to each other. Can you tell me what is causing this error to occur?
Here is a sample HTML code (because i cant just link to jsfiddle), but the link to jsfiddle is right at the bottom
<header id="main_header"> <!-- this is your header with logo, menu, login and get started now buttons -->
<div id="header_accent"></div> <!-- small accent image, barely seen on top of the page -->
<div id="header_holder"> <!-- this guy centers the header to the middle of the page's width -->
<img src="images/logo.png" alt="ssl8.com" id="logo"/> <!-- logo image -->
<div id="nav_holder"> <!-- positions the navigation and buttons -->
<nav>
<ul> <!-- navigation -->
<li class="active">prices</li>
<li>features</li>
<li>contact</li>
</ul>
</nav>
<button class="login">login</button> <!-- login button -->
<button class="getStartedNow">Get started now</button> <!-- get started now button -->
</div>
<div id="header_shadow"></div> <!-- holds the background shadow for the header (in CSS file) -->
</div>
</header> <!-- END of header -->
Here is jsfiddle.Ignore missing pictures etc, just click on the orange button and you will see what i am talking about.
jsfiddle
Thank you
Here is my solution http://jsfiddle.net/burn123/emfwA/16/
What I Changed
You had the opacity, box-shadow, transitions, and border-radius set for the buttons set on both buttons, which is redundant. I changed it so that it would apply to all buttons
Browser prefixes are not needed for box-shadow or border-radius
For your login button, you forgot the period before your login class, so the css was trying to find a element named login, which doesn't exist
Removed the active and hover from both elements and set a generic active and hover pseudo element
Added position relative to each button
On active, the button will be given a property of top: 1px
Changed the size of the header to min-width:100% so that the line will go all the way across
The main problem was coming from the fact that your buttons were set at a position of static, so by applying a margin-top of 1px, you were shifting the entire top down. By setting a position of relative, you can add properties such as top or left and it will move the element in that direction while still keeping the space of the element in the same position
I would set the nav_holder and getStartedNow classes to position:relative and then use top:1px to move it down the one pixel. That seems to fix the issue.
button.getStartedNow:active {
position: relative;
top: 1px;
}
I think the previous problem was caused by the way margins work but I don't know it well enough to speak to that.
You would also want to do this with the login button to get the same effect there.
Add position: relative to the .getStartedNow class, and change the active snippet to:
button.getStartedNow:active {
bottom: -1px;
}
Here a live example: http://jsfiddle.net/emfwA/17/ ..