This jsp home page is working fine with Mozilla and IE 7 but not in chrome. None of the images are being picked. Please advice.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- Libraries to include jstl tags -->
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!-- Libraries to include jstl tags -->
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- Libraries to include jstl tags -->
<!DOCTYPE HTML>
<html>
<head>
<%
String ua=request.getHeader("User-Agent").toLowerCase();
// condition used for mobile compatibility
if(ua.matches("(?i).*((android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hipt)) //Many such conditions are checked but I removed them to make it simple
{
response.sendRedirect("index?source=mobile");
return;
}
%>
<title>Arizona Health Sciences Library EBM Search Engine</title>
<link rel="stylesheet" type="text/css" href="css/style_index.css" > -- included css
</head>
<body>
<!-- Images that are not getting loaded -->
<img src="images/ua_logo_white.png" height="80" />
<div class="floatright">
<!-- Images that are not getting loaded -->
<img src="images/AHSL.png" height="80" width="100" />
</div>
<!-- Links to different search engines -->
<h2>General Medicine</h2>
<h2>Emergency Medicine</h2>
<h2>Medical Imaging</h2>
<h2>Pediatrics</h2>
<h2>Surgery / Critical Care</h2>
<!-- Static texts hard coded - Need to be replaced -->
<footer>
All content ©2012 Arizona Board of Regents. All rights reserved.
</footer>
</body>
</html>
style_index.css - This is the CSS used for this page. I am not sure if changes has to be made for this style sheet.
body {
font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
}
body {
background: url('../images/bg_top_repeat_dark_blue.jpg') repeat-x #f3f3f3;
}
image
{
border-width: 0;
}
#wrapper {
width: 800px;
margin: 100px auto;
}
#logo {
height: 397px;
text-indent: -10000px;
margin-bottom: -135px;
}
#logo.blank {
text-indent: 0;
}
h1 {
padding-top: 80px;
color: #202080;
font-size: 36px;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
h2 {
color: #202080;
font-size: 30px;
font-weight: bold;
text-align: left;
}
.floatright
{
float: right;
margin-right: 18px;
}
form {
background: url('../images/search_box.png') no-repeat;
height: 47px;
}
input {
background: none;
border: none;
outline: 0;
}
input.text {
width: 670px;
padding: 13px 0 13px 24px;
color: #505050;
font-size: 20px;
float: left;
}
input.submit {
width: 104px;
padding: 13px 0 13px 10px;
float: right;
cursor: pointer;
}
.ui-grid-a .ui-block-a {
width: 30%;
}
footer {
height: 50px;
padding: 5px 0 20px 0;
text-align: center;
}
when you are in chrome with your webpage opened juat press f12. a window will open. now in the right it there will be your css code displaying. check the code with red or yellow warning signs. these signs tell that the code is wrong or not required by chrome.
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
I'm confused! I have made a simple webpage to just show an image and some text. It's responsive and it works fine in Firefox, Chrome, Safari and Internet Explorer 10, but not in Internet Explorer 11.
The problem is that it's not responsive, it take a long time to load and it doesn't show the Font Awesome icons in Internet Explorer 11. What could be the reason for this and how could this be fixed? Really preciate some help since I can't find any solution for this when I google around. Thanks!
#import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
a {
text-decoration: none;
color: #2952a1;
}
html
{
overflow-y: scroll;
}
body {
margin:0;
padding:0;
height:100%;
color: #7F7F7F;
height: 100%;
}
#wrapper {
margin-top: 2%;
width: 100%;
height: 100%;
}
#card {
height: 100%;
margin: 0 auto;
width: 80%;
}
#mobileH1 {
display: none;
}
#desktopH1 {
display: block;
}
#leftSide {
height: auto;
float: left;
width: 50%;
}
#rightSide {
padding-top: 5%;
float: right;
width: 49%;
height: auto;
}
#leftSide img {
display: block;
height: auto;
width: 100%;
padding-top: 1%;
margin: 0 auto;
}
h1 {
text-align: left;
font-family: 'Shadows Into Light', cursive;
font-weight: 400;
font-size: 55px;
margin: 0;
}
p {
font-family: 'Dancing Script', cursive;
font-family: 'Shadows Into Light', cursive;
font-size: 28px;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 150px) and (max-width: 768px)
{
#mobileH1 {
display: block;
}
#desktopH1 {
display: none;
}
#card {
width: 90%;
}
#leftSide {
width: 100%;
}
#rightSide {
float: left;
padding-top: 0;
width: 100%;
}
#leftSide img {
width: 80%;
padding-top: 1%;
}
h1 {
font-size: 36px;
text-align: center;
}
p {
font-size: 24px;
}
}
#media only screen and (min-width: 150px) and (max-width: 320px)
{
h1 {
font-size: 28px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Konstkort & affischer</title>
<meta name="description" content="Description text" />
<meta name="viewport" content="width=width-device, initial-scale=1" />
<meta charset="utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="card">
<div id="leftSide">
<h1 id="mobileH1">Headline!</h1>
<img src="bilder/blomma.jpg"/>
</div>
<div id="rightSide">
<h1 id="desktopH1">Headline</h1>
<p>
Text
</p>
<p>
<i class="fa fa-phone fa-lg"></i> Phone number<br>
<i class="fa fa-envelope fa-lg"></i> Mail
</p>
</div>
</div>
</div>
</body>
</html>
It Seems that you have coded proper div tags from your css file and we believe it is not the problem in the code and it might be the reason it get loaded in other browser as well as in Internet Explorer 10. Please try following suggestions to get rid of common issue in "Internet Explorer 11" while it unable to load the webpage.
You might want to turn off Tracking Protection and ActiveX Filtering
in your "Internet Explorer 11" browser (TOOLS option). Tracking Protection and
ActiveX Filtering help protect your privacy by blocking images or
other content that might put your security or privacy at risk.
If the issue persists please try resetting Internet Explorer's security settings
Open the desktop, and then tap or click the Internet Explorer icon on
the taskbar.Tap or click the Tools button Tools button, and then tap
or click Internet options.
On the Security tab, tap or click Default level, and then tap or click
OK.
If none of these suggestions work, you can try resetting Internet Explorer to its default settings.
Hope this helps!
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
I am trying to create a simple search bar with a background, and an 'Advanced' href on the side. It is rendered correctly in Chrome, Mozilla, however in IE 8 the href appears as a separate block on the line below?
My HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
<script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="../../IMG/FireFox.png" alt="FireFox Logo" title="FireFox Home" />
<span id="usernav">Logout<a href="#">My Profile</span>
</div>
<form action="" method="Search">
<p>
<input type="search" />
<input type="submit" value="Search"/>
Advanced
</p>
</form>
</header>
</body>
</html>
My CSS code:
/* CSS Reset */
* { margin: 0; padding: 0; }
html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
img { border: 0;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Main CSS */
header { width: 1000px; margin: 0 auto; clear: both;}
.wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}
#usernav { position: relative; margin-top: 20 px; font-size: 12px;}
#usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none; float: right; padding: 8px;}
#usernav a:hover { text-decoration: underline; }
form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Ok I've solved the problem after playing around with the code a little. It seems that removing the
<span id="usernav">Logout<a href="#">My Profile</span>
from within the div and placing it directly within the header solved the IE bug. Not sure why though, suggestions are welcome. I can't post the image as I don't have more than 10 reputations points :(
I have set ridiculous padding values and cannot get padding to extend the total width beyond the content size. Isn't FF supposed to follow a "box model" whereby padding is added to the content size? Here's the relevant code.
Environment:
IE7, FF 3.6.8
CSS:
.StaticMenuStyle
{
width: auto;
background-image: url(../images/nav_repeat.gif);
background-repeat:repeat-x;
padding-left: 100px;
/*padding-top: 10px;
margin-top: 10px;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;*/
float:left;
}
.StaticMenuStyle a:link
{
padding-left: 100px;
text-decoration: none;
}
.StaticMenuItemStyle
{
height: 38px;
/*min-width: 75px;*/
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align: center;
color:#006c56;
padding-left: 100px;
/*padding-left: 100px;
padding-right: 8px;
padding-top: 0px;
padding-bottom: 0px;
border:5px solid clear;
/*margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;*/
/*background: right 50% url(../images/nav_div.gif) no-repeat;*/
background-image: url(../images/nav_div.gif);
background-repeat:no-repeat;
background-position:right;
/*text-indent:5px;*/
}
/*
.StaticSelectedStyle
{
color:#006c56;
height: 38px;
background-image: url(../images/nav_over.gif);
background-position:center bottom;
overflow:hidden;
}
*/
.StaticHoverStyle
{
/*color:Black;*/
/*color:White;*/
/*height: 38px;*/
/*background-image: url(../images/nav_over.gif);*/
/*background-position:center bottom;*/
/*overflow:hidden;*/
}
.StaticMenuStyle a:hover
{
/*background-image: none;*/
height: 38px;
background-image: url(../images/nav_over.gif);
background-position:center bottom;
color:Black;
text-decoration: none;
}
.DynamicMenuStyle
{
height: 38px;
/*width: auto;*/
}
ASP.NET
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SJMTemplateDot4.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" ShowStartingNode="false" />
<asp:Menu
ID="MenuMain"
runat="server"
DataSourceID="SiteMapDataSource2"
Orientation="Horizontal"
StaticMenuStyle-cssClass="StaticMenuStyle"
StaticMenuItemStyle-cssClass="StaticMenuItemStyle"
StaticHoverStyle-cssClass="StaticHoverStyle"
/>
</div>
</form>
</body>
</html>
Is the padding being overiden in another CSS file, perhaps? Try padding-left: 100px !important.
Also, as I mentioned in my comment, you should install Firebug. It can both tell you the actual computed padding value of each element AND it can show you excellent visual models of the exact dimensions of an element, including padding and margin.
IE Developer Toolbar can help with IE.